@spicainternational/ngx-sds-components 2.22.10 → 2.23.0

package/fesm2015/spicainternational-ngx-sds-components-src-lib-duration-box.mjs

@@ -0,0 +1,237 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from 'devextreme-angular';
+import { DxTextBoxModule, DxPopoverModule, DxScrollViewModule } from 'devextreme-angular';
+import * as i3 from 'devextreme-angular/ui/nested';
+import * as i5 from 'devextreme-angular/core';
+import * as i6 from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';
+import { SdsDurationPipeModule } from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';
+
+class DurationInputResolverService {
+    constructor() { }
+    resolve(input) {
+        if (!input || input.length === 0) {
+            return 0;
+        }
+        const inputSegments = input.split(':');
+        if (inputSegments.length > 2) {
+            //invalid input
+            return 0;
+        }
+        else if (inputSegments.length == 2) {
+            // we have hrs and minutes
+            const hrs = parseInt(inputSegments[0] ? inputSegments[0] : '0');
+            const mins = parseInt(inputSegments[1] ? inputSegments[1] : '0');
+            const totalMins = (hrs * 60) + mins;
+            return totalMins;
+        }
+        else if (inputSegments.length == 1) {
+            // take last two digits as mins
+            const nonSeparated = inputSegments[0];
+            let totalMins = 0;
+            if (nonSeparated.length <= 2) {
+                totalMins = parseInt(nonSeparated);
+            }
+            else {
+                const lastIndex = nonSeparated.length - 2;
+                const part1 = nonSeparated.slice(0, lastIndex);
+                const part2 = nonSeparated.slice(lastIndex);
+                const hrs = parseInt(part1);
+                const mins = parseInt(part2);
+                totalMins = (hrs * 60) + mins;
+            }
+            return totalMins;
+        }
+        return 0;
+    }
+}
+DurationInputResolverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DurationInputResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DurationInputResolverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DurationInputResolverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DurationInputResolverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class SdsDurationBoxComponent {
+    constructor(_durationInputResolver) {
+        this._durationInputResolver = _durationInputResolver;
+        this.value = null;
+        this.valueChange = new EventEmitter();
+        this.allowEmptyValue = true;
+        this.emptyValueText = 'not set';
+        this.width = '10rem';
+        this.elementUUID = 'sds-db-' + crypto.randomUUID();
+        this.inputValue = '';
+        this.showOptions = false;
+        this.optionsDropdownButton = {
+            icon: 'spindown',
+            stylingMode: 'text',
+            onClick: () => {
+                this.showOptions = !this.showOptions;
+            }
+        };
+        this.clearValueButton = {
+            icon: 'clear',
+            stylingMode: 'text',
+            onClick: () => {
+                this.applyOption(null);
+            }
+        };
+        this.isValueEmpty = false;
+        this.isValueSetInternally = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['value']) {
+            if (this.value === null) {
+                if (this.allowEmptyValue) {
+                    this.isValueEmpty = true;
+                    this.inputValue = this.emptyValueText;
+                }
+                else {
+                    this.inputValue = '0:00'; // TO-DO: resolve this scenario
+                }
+            }
+            else {
+                this.inputValue = this.minutesToDurationString(this.value);
+            }
+        }
+    }
+    ngOnInit() { }
+    blockNonNumberOrSemicolon(e) {
+        this.isValueSetInternally = false;
+        if (!(e.event.key === 'Enter' ||
+            e.event.key === 'NumpadEnter' ||
+            e.event.key === 'Delete' ||
+            e.event.key === 'Tab' ||
+            e.event.key === 'Backspace' ||
+            e.event.key === 'ArrowLeft' ||
+            e.event.key === 'ArrowRight' ||
+            e.event.key === 'ArrowTop' ||
+            e.event.key === 'ArrowBottom')) {
+            const regexNumberOfSemicolon = /\d|:/;
+            if (!regexNumberOfSemicolon.test(e.event.key)) {
+                e.event.preventDefault();
+                console.log(`${e.event.key} is not valid`);
+            }
+            else {
+                this.isValueEmpty = false;
+            }
+        }
+    }
+    resolveInput(data) {
+        if (!this.isValueSetInternally) {
+            if (this.isValueEmpty || (data.value === '' && this.allowEmptyValue)) {
+                // this.inputValue = this.emptyValueTextthis
+                // this.applyOption(null);
+                this.setValue(null);
+            }
+            else {
+                const resolvedValue = this._durationInputResolver.resolve(data.value);
+                if (resolvedValue === null && this.allowEmptyValue) {
+                    this.setValue(null);
+                }
+                else if (resolvedValue === null && !this.allowEmptyValue) {
+                    this.setValue(resolvedValue);
+                }
+                else {
+                    this.setValue(resolvedValue);
+                }
+            }
+        }
+    }
+    applyOption(value) {
+        this.showOptions = false;
+        this.isValueSetInternally = false;
+        this.setValue(value);
+    }
+    setValue(value) {
+        if ((this.isValueEmpty && value != null) || (!this.isValueEmpty && this.value != value)) {
+            this.value = value;
+            this.valueChange.emit(this.value);
+            if (value === null) {
+                this.isValueEmpty = true;
+                this.isValueSetInternally = true;
+                this.inputValue = this.emptyValueText;
+            }
+            else if (typeof value === 'number') {
+                this.isValueEmpty = false;
+                this.isValueSetInternally = true;
+                this.inputValue = this.minutesToDurationString(this.value);
+            }
+        }
+    }
+    minutesToDurationString(minutes) {
+        const hours = Math.floor(minutes / 60);
+        const mins = minutes % 60;
+        return `${hours.toString().padStart(1, "0")}:${mins.toString().padStart(2, "0")}`;
+    }
+}
+SdsDurationBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationBoxComponent, deps: [{ token: DurationInputResolverService }], target: i0.ɵɵFactoryTarget.Component });
+SdsDurationBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDurationBoxComponent, selector: "sds-duration-box", inputs: { value: "value", allowEmptyValue: "allowEmptyValue", emptyValueText: "emptyValueText", options: "options", width: "width" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<dx-text-box\n    #textbox\n    [id]=\"elementUUID\"\n    [value]=\"inputValue\"\n    (onKeyDown)=\"blockNonNumberOrSemicolon($event)\"\n    (onValueChanged)=\"resolveInput($event)\"\n    [width]=\"width\"\n    >\n    <dxi-button\n        *ngIf=\"allowEmptyValue\"\n        name=\"clearValue\"\n        location=\"after\"\n        [options]=\"clearValueButton\"\n    ></dxi-button>\n    <dxi-button\n        \n        *ngIf=\"options && options.length > 0\"\n        name=\"optionsDropdown\"\n        location=\"after\"\n        [options]=\"optionsDropdownButton\"\n    ></dxi-button>\n</dx-text-box>\n\n\n<dx-popover\n    target=\"#{{elementUUID}}\"\n    [(visible)]=\"showOptions\"\n    [width]=\"width\"\n    [closeOnOutsideClick]=\"true\"\n    [wrapperAttr]=\"{ class: 'sds-durationbox-options-popover' }\"\n    >\n\n    <div *dxTemplate=\"let data of 'content'\">\n\n        <button\n            class=\"dropdown-item border-0\"\n            [class.selected] = \"isValueEmpty\"\n            (click)=\"applyOption(null)\"\n            > {{ emptyValueText}}\n        </button>\n\n        <div *ngFor=\"let option of options\">\n            <button\n                class=\"dropdown-item border-0\"\n                [class.selected] = \"option === value\"\n                (click)=\"applyOption(option)\"\n            > {{option | sdsDurationFormat}}\n            </button>\n        </div>\n    </div>\n\n    <!-- <div *ngFor=\"let option of options\"\n        class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\n        <div class=\"ml-2 pl-1\">\n            {{option | sdsDurationFormat}}\n        </div>\n    </div> -->\n</dx-popover>", styles: [".duration-box-container{height:calc(1.5em + .75rem + 2px)}.duration-box-container .options-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.duration-box-container input{border:0;min-width:0}.duration-box-container input:focus{outline:none}::ng-deep .sds-durationbox-options-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-durationbox-options-popover .dropdown-item:focus{outline:none}::ng-deep .sds-durationbox-options-popover .dropdown-item .selected{background-color:#dee2e6}\n"], components: [{ type: i2.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i3.DxiButtonComponent, selector: "dxi-button", inputs: ["location", "name", "options", "cssClass", "disabled", "hint", "icon", "onClick", "template", "text", "visible"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "sdsDurationFormat": i6.SdsDurationFormatPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-duration-box', template: "<dx-text-box\n    #textbox\n    [id]=\"elementUUID\"\n    [value]=\"inputValue\"\n    (onKeyDown)=\"blockNonNumberOrSemicolon($event)\"\n    (onValueChanged)=\"resolveInput($event)\"\n    [width]=\"width\"\n    >\n    <dxi-button\n        *ngIf=\"allowEmptyValue\"\n        name=\"clearValue\"\n        location=\"after\"\n        [options]=\"clearValueButton\"\n    ></dxi-button>\n    <dxi-button\n        \n        *ngIf=\"options && options.length > 0\"\n        name=\"optionsDropdown\"\n        location=\"after\"\n        [options]=\"optionsDropdownButton\"\n    ></dxi-button>\n</dx-text-box>\n\n\n<dx-popover\n    target=\"#{{elementUUID}}\"\n    [(visible)]=\"showOptions\"\n    [width]=\"width\"\n    [closeOnOutsideClick]=\"true\"\n    [wrapperAttr]=\"{ class: 'sds-durationbox-options-popover' }\"\n    >\n\n    <div *dxTemplate=\"let data of 'content'\">\n\n        <button\n            class=\"dropdown-item border-0\"\n            [class.selected] = \"isValueEmpty\"\n            (click)=\"applyOption(null)\"\n            > {{ emptyValueText}}\n        </button>\n\n        <div *ngFor=\"let option of options\">\n            <button\n                class=\"dropdown-item border-0\"\n                [class.selected] = \"option === value\"\n                (click)=\"applyOption(option)\"\n            > {{option | sdsDurationFormat}}\n            </button>\n        </div>\n    </div>\n\n    <!-- <div *ngFor=\"let option of options\"\n        class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\n        <div class=\"ml-2 pl-1\">\n            {{option | sdsDurationFormat}}\n        </div>\n    </div> -->\n</dx-popover>", styles: [".duration-box-container{height:calc(1.5em + .75rem + 2px)}.duration-box-container .options-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.duration-box-container input{border:0;min-width:0}.duration-box-container input:focus{outline:none}::ng-deep .sds-durationbox-options-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-durationbox-options-popover .dropdown-item:focus{outline:none}::ng-deep .sds-durationbox-options-popover .dropdown-item .selected{background-color:#dee2e6}\n"] }]
+        }], ctorParameters: function () { return [{ type: DurationInputResolverService }]; }, propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], allowEmptyValue: [{
+                type: Input
+            }], emptyValueText: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], textbox: [{
+                type: ViewChild,
+                args: ['textbox', { static: true }]
+            }] } });
+
+const components = [
+    SdsDurationBoxComponent
+];
+class SdsDurationBoxModule {
+}
+SdsDurationBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SdsDurationBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationBoxModule, declarations: [SdsDurationBoxComponent], imports: [CommonModule,
+        SdsDurationPipeModule,
+        DxTextBoxModule,
+        DxPopoverModule,
+        DxScrollViewModule], exports: [SdsDurationBoxComponent] });
+SdsDurationBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationBoxModule, imports: [[
+            CommonModule,
+            SdsDurationPipeModule,
+            DxTextBoxModule,
+            DxPopoverModule,
+            DxScrollViewModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SdsDurationBoxComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        SdsDurationPipeModule,
+                        DxTextBoxModule,
+                        DxPopoverModule,
+                        DxScrollViewModule,
+                    ],
+                    exports: [
+                        ...components
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsDurationBoxComponent, SdsDurationBoxModule };
+//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-duration-box.mjs.map

package/fesm2015/spicainternational-ngx-sds-components-src-lib-duration-box.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-duration-box.mjs","sources":["../../../projects/ngx-sds-components/src/lib/duration-box/duration-input-resolver.service.ts","../../../projects/ngx-sds-components/src/lib/duration-box/duration-box.component.ts","../../../projects/ngx-sds-components/src/lib/duration-box/duration-box.component.html","../../../projects/ngx-sds-components/src/lib/duration-box/duration-box.module.ts","../../../projects/ngx-sds-components/src/lib/duration-box/spicainternational-ngx-sds-components-src-lib-duration-box.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n    providedIn: 'root',\n})\nexport class DurationInputResolverService {\n    \n    constructor() {}\n\n    public resolve(input: string): number | null{\n        if (!input || input.length === 0) {\n            return 0;\n        }\n\n        const inputSegments = input.split(':');\n        if (inputSegments.length > 2) {\n            //invalid input\n            return 0;\n        } else if (inputSegments.length == 2){\n            // we have hrs and minutes\n            const hrs = parseInt(inputSegments[0] ? inputSegments[0] : '0');\n            const mins = parseInt(inputSegments[1] ? inputSegments[1] : '0');\n            const totalMins = (hrs * 60) + mins;\n\n            return totalMins;\n        } else if (inputSegments.length == 1) {\n            // take last two digits as mins\n            const nonSeparated = inputSegments[0];\n\n            let totalMins = 0;\n            if (nonSeparated.length <= 2) {\n                totalMins = parseInt(nonSeparated)\n            } else {\n                const lastIndex = nonSeparated.length - 2;\n                const part1 = nonSeparated.slice(0, lastIndex);\n                const part2 = nonSeparated.slice(lastIndex);\n                const hrs = parseInt(part1);\n                const mins = parseInt(part2);\n                totalMins = (hrs * 60) + mins;            \n            }\n            return totalMins;\n        }\n        return 0;        \n    }\n}\n","import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\nimport { DxTextBoxComponent } from 'devextreme-angular';\nimport { DurationInputResolverService } from './duration-input-resolver.service';\n\n@Component({\n    selector: 'sds-duration-box',\n    templateUrl: './duration-box.component.html',\n    styleUrls: ['./duration-box.component.scss'],\n})\nexport class SdsDurationBoxComponent implements OnInit, OnChanges {\n\n    @Input() value: number | null = null;\n    @Output() valueChange = new EventEmitter<number | null>();\n\n    @Input() allowEmptyValue: boolean = true;\n    @Input() emptyValueText: string = 'not set';\n\n    @Input() options?: number[];\n    @Input() width: string = '10rem';\n\n    @ViewChild('textbox', {static: true}) textbox?: DxTextBoxComponent;\n\n\n    public elementUUID = 'sds-db-' + crypto.randomUUID();\n\n    public inputValue: string = '';\n    public showOptions: boolean = false;\n    \n    public optionsDropdownButton =  {\n        icon: 'spindown',\n        stylingMode: 'text',\n        onClick: () => {\n            this.showOptions = !this.showOptions;\n        }\n    }\n\n    public clearValueButton =  {\n        icon: 'clear',\n        stylingMode: 'text',\n        onClick: () => {\n            this.applyOption(null);\n        }\n    }\n\n    public isValueEmpty = false;\n\n    private isValueSetInternally = false;\n\n    constructor(\n        private _durationInputResolver: DurationInputResolverService\n    ) {}\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['value']) {\n            if (this.value === null) {\n                if (this.allowEmptyValue) {\n                    this.isValueEmpty = true;\n                    this.inputValue = this.emptyValueText;\n                } else {\n                    this.inputValue = '0:00'; // TO-DO: resolve this scenario\n                }\n\n            } else {\n               this.inputValue = this.minutesToDurationString(this.value)\n            }\n        }\n    }\n\n    ngOnInit(): void {}\n\n    public blockNonNumberOrSemicolon(e: any) {\n        this.isValueSetInternally = false;\n\n        if (!(\n            e.event.key === 'Enter' || \n            e.event.key === 'NumpadEnter' || \n            e.event.key === 'Delete' || \n            e.event.key === 'Tab' ||\n            e.event.key === 'Backspace' ||\n            e.event.key === 'ArrowLeft' ||\n            e.event.key === 'ArrowRight' ||\n            e.event.key === 'ArrowTop' ||\n            e.event.key === 'ArrowBottom'\n            )) {\n            const regexNumberOfSemicolon = /\\d|:/;\n            if (!regexNumberOfSemicolon.test(e.event.key)) {\n                e.event.preventDefault();\n                console.log(`${e.event.key} is not valid`);\n            } else {\n                this.isValueEmpty = false;\n            }\n        }\n    }\n\n    public resolveInput(data: any) {\n        if (!this.isValueSetInternally){\n            if (this.isValueEmpty || (data.value === '' && this.allowEmptyValue)) {\n                // this.inputValue = this.emptyValueTextthis\n                // this.applyOption(null);\n                this.setValue(null);\n            } else {        \n                const resolvedValue = this._durationInputResolver.resolve(data.value);\n                \n                if (resolvedValue === null && this.allowEmptyValue) {\n                    this.setValue(null);\n                } else if (resolvedValue === null && !this.allowEmptyValue) {\n                    this.setValue(resolvedValue);\n                } else {\n                    this.setValue(resolvedValue);\n                }\n            }\n        }\n    }\n\n    public applyOption(value: number | null){\n        this.showOptions = false;\n        this.isValueSetInternally = false;\n        this.setValue(value);\n    }\n\n    private setValue(value: number | null){\n        if ( (this.isValueEmpty && value != null)  || (!this.isValueEmpty && this.value != value)) {\n            this.value = value;\n            this.valueChange.emit(this.value);\n            if (value === null) {\n                this.isValueEmpty = true;\n                this.isValueSetInternally = true;\n                this.inputValue = this.emptyValueText;\n            } else if (typeof value === 'number') {\n                this.isValueEmpty = false;\n                this.isValueSetInternally = true;\n                this.inputValue = this.minutesToDurationString(this.value as number);\n            }\n        }\n\n    }\n\n    private minutesToDurationString(minutes: number): string {\n        const hours = Math.floor(minutes/60);\n        const mins = minutes % 60;\n        return `${hours.toString().padStart(1, \"0\")}:${mins.toString().padStart(2, \"0\")}`;\n    }\n}\n","<dx-text-box\n    #textbox\n    [id]=\"elementUUID\"\n    [value]=\"inputValue\"\n    (onKeyDown)=\"blockNonNumberOrSemicolon($event)\"\n    (onValueChanged)=\"resolveInput($event)\"\n    [width]=\"width\"\n    >\n    <dxi-button\n        *ngIf=\"allowEmptyValue\"\n        name=\"clearValue\"\n        location=\"after\"\n        [options]=\"clearValueButton\"\n    ></dxi-button>\n    <dxi-button\n        \n        *ngIf=\"options && options.length > 0\"\n        name=\"optionsDropdown\"\n        location=\"after\"\n        [options]=\"optionsDropdownButton\"\n    ></dxi-button>\n</dx-text-box>\n\n\n<dx-popover\n    target=\"#{{elementUUID}}\"\n    [(visible)]=\"showOptions\"\n    [width]=\"width\"\n    [closeOnOutsideClick]=\"true\"\n    [wrapperAttr]=\"{ class: 'sds-durationbox-options-popover' }\"\n    >\n\n    <div *dxTemplate=\"let data of 'content'\">\n\n        <button\n            class=\"dropdown-item border-0\"\n            [class.selected] = \"isValueEmpty\"\n            (click)=\"applyOption(null)\"\n            > {{ emptyValueText}}\n        </button>\n\n        <div *ngFor=\"let option of options\">\n            <button\n                class=\"dropdown-item border-0\"\n                [class.selected] = \"option === value\"\n                (click)=\"applyOption(option)\"\n            > {{option | sdsDurationFormat}}\n            </button>\n        </div>\n    </div>\n\n    <!-- <div *ngFor=\"let option of options\"\n        class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\n        <div class=\"ml-2 pl-1\">\n            {{option | sdsDurationFormat}}\n        </div>\n    </div> -->\n</dx-popover>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsDurationBoxComponent } from './duration-box.component';\nimport { DxPopoverModule, DxScrollViewModule, DxTextBoxModule } from 'devextreme-angular';\nimport { SdsDurationPipeModule } from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\n\n\n\nconst components = [\n    SdsDurationBoxComponent\n]\n\n@NgModule({\n  declarations: [\n    SdsDurationBoxComponent\n  ],\n  imports: [\n    CommonModule,\n\n    SdsDurationPipeModule,\n    \n    DxTextBoxModule,\n    DxPopoverModule,\n    DxScrollViewModule,\n  ],\n  exports: [\n    ...components\n  ]\n})\nexport class SdsDurationBoxModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.DurationInputResolverService"],"mappings":"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"}

package/fesm2015/spicainternational-ngx-sds-components-src-lib-duration-pipe.mjs

@@ -0,0 +1,48 @@
+import * as i0 from '@angular/core';
+import { Pipe, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class SdsDurationFormatPipe {
+    transform(value, emptyValueText = '') {
+        if (value === null) {
+            return emptyValueText;
+        }
+        else if (typeof value === 'number') {
+            const sign = Math.sign(value);
+            value = Math.abs(value);
+            const hours = Math.floor(value / 60);
+            const mins = value % 60;
+            return `${sign === -1 ? '-' : ''}${hours.toString().padStart(1, '0')}:${mins.toString().padStart(2, '0')}`;
+        }
+        return '';
+    }
+}
+SdsDurationFormatPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SdsDurationFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationFormatPipe, name: "sdsDurationFormat" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sdsDurationFormat',
+                }]
+        }] });
+
+class SdsDurationPipeModule {
+}
+SdsDurationPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SdsDurationPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationPipeModule, declarations: [SdsDurationFormatPipe], imports: [CommonModule], exports: [SdsDurationFormatPipe] });
+SdsDurationPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationPipeModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationPipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SdsDurationFormatPipe],
+                    imports: [CommonModule],
+                    exports: [SdsDurationFormatPipe],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsDurationFormatPipe, SdsDurationPipeModule };
+//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-duration-pipe.mjs.map

package/fesm2015/spicainternational-ngx-sds-components-src-lib-duration-pipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-duration-pipe.mjs","sources":["../../../projects/ngx-sds-components/src/lib/duration-pipe/duration-format.pipe.ts","../../../projects/ngx-sds-components/src/lib/duration-pipe/duration-pipe.module.ts","../../../projects/ngx-sds-components/src/lib/duration-pipe/spicainternational-ngx-sds-components-src-lib-duration-pipe.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({\r\n    name: 'sdsDurationFormat',\r\n})\r\nexport class SdsDurationFormatPipe implements PipeTransform {\r\n    transform(value: number | null, emptyValueText: string = ''): string {\r\n        if (value === null) {\r\n            return emptyValueText;\r\n        } else if (typeof value === 'number') {\r\n            const sign = Math.sign(value);\r\n            value = Math.abs(value);\r\n            const hours = Math.floor(value / 60);\r\n            const mins = value % 60;\r\n            return `${sign === -1 ? '-' : ''}${hours.toString().padStart(1, '0')}:${mins.toString().padStart(2, '0')}`;\r\n        }\r\n        return '';\r\n    }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsDurationFormatPipe } from './duration-format.pipe';\r\n\r\n@NgModule({\r\n    declarations: [SdsDurationFormatPipe],\r\n    imports: [CommonModule],\r\n    exports: [SdsDurationFormatPipe],\r\n})\r\nexport class SdsDurationPipeModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAKa,qBAAqB,CAAA;AAC9B,IAAA,SAAS,CAAC,KAAoB,EAAE,cAAA,GAAyB,EAAE,EAAA;QACvD,IAAI,KAAK,KAAK,IAAI,EAAE;AAChB,YAAA,OAAO,cAAc,CAAC;AACzB,SAAA;AAAM,aAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAClC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC9B,YAAA,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACxB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC;AACrC,YAAA,MAAM,IAAI,GAAG,KAAK,GAAG,EAAE,CAAC;AACxB,YAAA,OAAO,GAAG,IAAI,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AAC9G,SAAA;AACD,QAAA,OAAO,EAAE,CAAC;KACb;;kHAZQ,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA;gHAArB,qBAAqB,EAAA,IAAA,EAAA,mBAAA,EAAA,CAAA,CAAA;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAHjC,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACF,oBAAA,IAAI,EAAE,mBAAmB;iBAC5B,CAAA;;;MCKY,qBAAqB,CAAA;;kHAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAArB,qBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,EAJf,YAAA,EAAA,CAAA,qBAAqB,CAC1B,EAAA,OAAA,EAAA,CAAA,YAAY,aACZ,qBAAqB,CAAA,EAAA,CAAA,CAAA;mHAEtB,qBAAqB,EAAA,OAAA,EAAA,CAHrB,CAAC,YAAY,CAAC,CAAA,EAAA,CAAA,CAAA;2FAGd,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBALjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,YAAY,EAAE,CAAC,qBAAqB,CAAC;oBACrC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,qBAAqB,CAAC;iBACnC,CAAA;;;ACRD;;AAEG;;;;"}

package/fesm2015/spicainternational-ngx-sds-components.mjs

@@ -4,6 +4,8 @@ export * from '@spicainternational/ngx-sds-components/src/lib/callout';
 export * from '@spicainternational/ngx-sds-components/src/lib/color-picker';
 export * from '@spicainternational/ngx-sds-components/src/lib/date-picker';
 export * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
+export * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';
+export * from '@spicainternational/ngx-sds-components/src/lib/duration-box';
 export * from '@spicainternational/ngx-sds-components/src/lib/layout';
 export * from '@spicainternational/ngx-sds-components/src/lib/modal';
 export * from '@spicainternational/ngx-sds-components/src/lib/navigation';

package/fesm2015/spicainternational-ngx-sds-components.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/layout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/page-header';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}
+{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/layout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/page-header';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}

package/fesm2020/spicainternational-ngx-sds-components-src-lib-duration-box.mjs

@@ -0,0 +1,237 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from 'devextreme-angular';
+import { DxTextBoxModule, DxPopoverModule, DxScrollViewModule } from 'devextreme-angular';
+import * as i3 from 'devextreme-angular/ui/nested';
+import * as i5 from 'devextreme-angular/core';
+import * as i6 from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';
+import { SdsDurationPipeModule } from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';
+
+class DurationInputResolverService {
+    constructor() { }
+    resolve(input) {
+        if (!input || input.length === 0) {
+            return 0;
+        }
+        const inputSegments = input.split(':');
+        if (inputSegments.length > 2) {
+            //invalid input
+            return 0;
+        }
+        else if (inputSegments.length == 2) {
+            // we have hrs and minutes
+            const hrs = parseInt(inputSegments[0] ? inputSegments[0] : '0');
+            const mins = parseInt(inputSegments[1] ? inputSegments[1] : '0');
+            const totalMins = (hrs * 60) + mins;
+            return totalMins;
+        }
+        else if (inputSegments.length == 1) {
+            // take last two digits as mins
+            const nonSeparated = inputSegments[0];
+            let totalMins = 0;
+            if (nonSeparated.length <= 2) {
+                totalMins = parseInt(nonSeparated);
+            }
+            else {
+                const lastIndex = nonSeparated.length - 2;
+                const part1 = nonSeparated.slice(0, lastIndex);
+                const part2 = nonSeparated.slice(lastIndex);
+                const hrs = parseInt(part1);
+                const mins = parseInt(part2);
+                totalMins = (hrs * 60) + mins;
+            }
+            return totalMins;
+        }
+        return 0;
+    }
+}
+DurationInputResolverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DurationInputResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DurationInputResolverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DurationInputResolverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DurationInputResolverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class SdsDurationBoxComponent {
+    constructor(_durationInputResolver) {
+        this._durationInputResolver = _durationInputResolver;
+        this.value = null;
+        this.valueChange = new EventEmitter();
+        this.allowEmptyValue = true;
+        this.emptyValueText = 'not set';
+        this.width = '10rem';
+        this.elementUUID = 'sds-db-' + crypto.randomUUID();
+        this.inputValue = '';
+        this.showOptions = false;
+        this.optionsDropdownButton = {
+            icon: 'spindown',
+            stylingMode: 'text',
+            onClick: () => {
+                this.showOptions = !this.showOptions;
+            }
+        };
+        this.clearValueButton = {
+            icon: 'clear',
+            stylingMode: 'text',
+            onClick: () => {
+                this.applyOption(null);
+            }
+        };
+        this.isValueEmpty = false;
+        this.isValueSetInternally = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['value']) {
+            if (this.value === null) {
+                if (this.allowEmptyValue) {
+                    this.isValueEmpty = true;
+                    this.inputValue = this.emptyValueText;
+                }
+                else {
+                    this.inputValue = '0:00'; // TO-DO: resolve this scenario
+                }
+            }
+            else {
+                this.inputValue = this.minutesToDurationString(this.value);
+            }
+        }
+    }
+    ngOnInit() { }
+    blockNonNumberOrSemicolon(e) {
+        this.isValueSetInternally = false;
+        if (!(e.event.key === 'Enter' ||
+            e.event.key === 'NumpadEnter' ||
+            e.event.key === 'Delete' ||
+            e.event.key === 'Tab' ||
+            e.event.key === 'Backspace' ||
+            e.event.key === 'ArrowLeft' ||
+            e.event.key === 'ArrowRight' ||
+            e.event.key === 'ArrowTop' ||
+            e.event.key === 'ArrowBottom')) {
+            const regexNumberOfSemicolon = /\d|:/;
+            if (!regexNumberOfSemicolon.test(e.event.key)) {
+                e.event.preventDefault();
+                console.log(`${e.event.key} is not valid`);
+            }
+            else {
+                this.isValueEmpty = false;
+            }
+        }
+    }
+    resolveInput(data) {
+        if (!this.isValueSetInternally) {
+            if (this.isValueEmpty || (data.value === '' && this.allowEmptyValue)) {
+                // this.inputValue = this.emptyValueTextthis
+                // this.applyOption(null);
+                this.setValue(null);
+            }
+            else {
+                const resolvedValue = this._durationInputResolver.resolve(data.value);
+                if (resolvedValue === null && this.allowEmptyValue) {
+                    this.setValue(null);
+                }
+                else if (resolvedValue === null && !this.allowEmptyValue) {
+                    this.setValue(resolvedValue);
+                }
+                else {
+                    this.setValue(resolvedValue);
+                }
+            }
+        }
+    }
+    applyOption(value) {
+        this.showOptions = false;
+        this.isValueSetInternally = false;
+        this.setValue(value);
+    }
+    setValue(value) {
+        if ((this.isValueEmpty && value != null) || (!this.isValueEmpty && this.value != value)) {
+            this.value = value;
+            this.valueChange.emit(this.value);
+            if (value === null) {
+                this.isValueEmpty = true;
+                this.isValueSetInternally = true;
+                this.inputValue = this.emptyValueText;
+            }
+            else if (typeof value === 'number') {
+                this.isValueEmpty = false;
+                this.isValueSetInternally = true;
+                this.inputValue = this.minutesToDurationString(this.value);
+            }
+        }
+    }
+    minutesToDurationString(minutes) {
+        const hours = Math.floor(minutes / 60);
+        const mins = minutes % 60;
+        return `${hours.toString().padStart(1, "0")}:${mins.toString().padStart(2, "0")}`;
+    }
+}
+SdsDurationBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationBoxComponent, deps: [{ token: DurationInputResolverService }], target: i0.ɵɵFactoryTarget.Component });
+SdsDurationBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDurationBoxComponent, selector: "sds-duration-box", inputs: { value: "value", allowEmptyValue: "allowEmptyValue", emptyValueText: "emptyValueText", options: "options", width: "width" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<dx-text-box\n    #textbox\n    [id]=\"elementUUID\"\n    [value]=\"inputValue\"\n    (onKeyDown)=\"blockNonNumberOrSemicolon($event)\"\n    (onValueChanged)=\"resolveInput($event)\"\n    [width]=\"width\"\n    >\n    <dxi-button\n        *ngIf=\"allowEmptyValue\"\n        name=\"clearValue\"\n        location=\"after\"\n        [options]=\"clearValueButton\"\n    ></dxi-button>\n    <dxi-button\n        \n        *ngIf=\"options && options.length > 0\"\n        name=\"optionsDropdown\"\n        location=\"after\"\n        [options]=\"optionsDropdownButton\"\n    ></dxi-button>\n</dx-text-box>\n\n\n<dx-popover\n    target=\"#{{elementUUID}}\"\n    [(visible)]=\"showOptions\"\n    [width]=\"width\"\n    [closeOnOutsideClick]=\"true\"\n    [wrapperAttr]=\"{ class: 'sds-durationbox-options-popover' }\"\n    >\n\n    <div *dxTemplate=\"let data of 'content'\">\n\n        <button\n            class=\"dropdown-item border-0\"\n            [class.selected] = \"isValueEmpty\"\n            (click)=\"applyOption(null)\"\n            > {{ emptyValueText}}\n        </button>\n\n        <div *ngFor=\"let option of options\">\n            <button\n                class=\"dropdown-item border-0\"\n                [class.selected] = \"option === value\"\n                (click)=\"applyOption(option)\"\n            > {{option | sdsDurationFormat}}\n            </button>\n        </div>\n    </div>\n\n    <!-- <div *ngFor=\"let option of options\"\n        class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\n        <div class=\"ml-2 pl-1\">\n            {{option | sdsDurationFormat}}\n        </div>\n    </div> -->\n</dx-popover>", styles: [".duration-box-container{height:calc(1.5em + .75rem + 2px)}.duration-box-container .options-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.duration-box-container input{border:0;min-width:0}.duration-box-container input:focus{outline:none}::ng-deep .sds-durationbox-options-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-durationbox-options-popover .dropdown-item:focus{outline:none}::ng-deep .sds-durationbox-options-popover .dropdown-item .selected{background-color:#dee2e6}\n"], components: [{ type: i2.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i3.DxiButtonComponent, selector: "dxi-button", inputs: ["location", "name", "options", "cssClass", "disabled", "hint", "icon", "onClick", "template", "text", "visible"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "sdsDurationFormat": i6.SdsDurationFormatPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-duration-box', template: "<dx-text-box\n    #textbox\n    [id]=\"elementUUID\"\n    [value]=\"inputValue\"\n    (onKeyDown)=\"blockNonNumberOrSemicolon($event)\"\n    (onValueChanged)=\"resolveInput($event)\"\n    [width]=\"width\"\n    >\n    <dxi-button\n        *ngIf=\"allowEmptyValue\"\n        name=\"clearValue\"\n        location=\"after\"\n        [options]=\"clearValueButton\"\n    ></dxi-button>\n    <dxi-button\n        \n        *ngIf=\"options && options.length > 0\"\n        name=\"optionsDropdown\"\n        location=\"after\"\n        [options]=\"optionsDropdownButton\"\n    ></dxi-button>\n</dx-text-box>\n\n\n<dx-popover\n    target=\"#{{elementUUID}}\"\n    [(visible)]=\"showOptions\"\n    [width]=\"width\"\n    [closeOnOutsideClick]=\"true\"\n    [wrapperAttr]=\"{ class: 'sds-durationbox-options-popover' }\"\n    >\n\n    <div *dxTemplate=\"let data of 'content'\">\n\n        <button\n            class=\"dropdown-item border-0\"\n            [class.selected] = \"isValueEmpty\"\n            (click)=\"applyOption(null)\"\n            > {{ emptyValueText}}\n        </button>\n\n        <div *ngFor=\"let option of options\">\n            <button\n                class=\"dropdown-item border-0\"\n                [class.selected] = \"option === value\"\n                (click)=\"applyOption(option)\"\n            > {{option | sdsDurationFormat}}\n            </button>\n        </div>\n    </div>\n\n    <!-- <div *ngFor=\"let option of options\"\n        class=\"d-flex align-items-center p-1 my-1 mx-1 overflow-avatar-container\" >\n        <div class=\"ml-2 pl-1\">\n            {{option | sdsDurationFormat}}\n        </div>\n    </div> -->\n</dx-popover>", styles: [".duration-box-container{height:calc(1.5em + .75rem + 2px)}.duration-box-container .options-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.duration-box-container input{border:0;min-width:0}.duration-box-container input:focus{outline:none}::ng-deep .sds-durationbox-options-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-durationbox-options-popover .dropdown-item:focus{outline:none}::ng-deep .sds-durationbox-options-popover .dropdown-item .selected{background-color:#dee2e6}\n"] }]
+        }], ctorParameters: function () { return [{ type: DurationInputResolverService }]; }, propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], allowEmptyValue: [{
+                type: Input
+            }], emptyValueText: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], textbox: [{
+                type: ViewChild,
+                args: ['textbox', { static: true }]
+            }] } });
+
+const components = [
+    SdsDurationBoxComponent
+];
+class SdsDurationBoxModule {
+}
+SdsDurationBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SdsDurationBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationBoxModule, declarations: [SdsDurationBoxComponent], imports: [CommonModule,
+        SdsDurationPipeModule,
+        DxTextBoxModule,
+        DxPopoverModule,
+        DxScrollViewModule], exports: [SdsDurationBoxComponent] });
+SdsDurationBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationBoxModule, imports: [[
+            CommonModule,
+            SdsDurationPipeModule,
+            DxTextBoxModule,
+            DxPopoverModule,
+            DxScrollViewModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDurationBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SdsDurationBoxComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        SdsDurationPipeModule,
+                        DxTextBoxModule,
+                        DxPopoverModule,
+                        DxScrollViewModule,
+                    ],
+                    exports: [
+                        ...components
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsDurationBoxComponent, SdsDurationBoxModule };
+//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-duration-box.mjs.map