@spicainternational/ngx-sds-components 7.12.0-beta.1 → 8.0.0

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

@@ -0,0 +1,354 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, ViewChild, Input, Output, Component } from '@angular/core';
+import { SdsDurationFormatPipe } from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';
+import * as i2 from 'devextreme-angular';
+import { DxTextBoxModule, DxValidatorModule } from 'devextreme-angular';
+import * as i3 from 'devextreme-angular/ui/nested';
+import { DxiValidationRuleModule, DxiButtonModule } from 'devextreme-angular/ui/nested';
+import * as i6 from 'devextreme-angular/ui/scroll-view';
+import { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';
+import * as i4 from 'devextreme-angular/core';
+import { DxTemplateModule } from 'devextreme-angular/core';
+import * as i5 from 'devextreme-angular/ui/popover';
+import { DxPopoverModule } from 'devextreme-angular/ui/popover';
+import { NgIf, NgFor } from '@angular/common';
+
+class DurationService {
+    constructor() { }
+    resolve(input) {
+        if (!input || input.length === 0) {
+            return null;
+        }
+        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;
+    }
+    isValidInput(input) {
+        if (input === '') {
+            return true;
+        }
+        const regexNumbersOnly = /^[+-]?\d+$/;
+        const regexColonSeparated = /^[+-]?\d+:\d+$/;
+        return regexNumbersOnly.test(input) || regexColonSeparated.test(input);
+    }
+    getDefaultValue(min, max) {
+        let defaultValue = 0;
+        // try keeping the 0 as default
+        // if it is outside the min/max then adjust
+        if (min) {
+            defaultValue = Math.max(defaultValue, min);
+        }
+        if (max) {
+            defaultValue = Math.min(defaultValue, max);
+        }
+        return defaultValue;
+    }
+    isValueWithinLimits(value, min, max) {
+        return !((min != undefined && value < min) || (max != undefined && value > max));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DurationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DurationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Component allows user to enter duration in h:mm format. User may also select no value is this is applicable to the
+ * use case. A list of pre-defined durations can be provided for easier selection.
+ *
+ * The auto resolve function tries to convert entered text into minutes. The algorithm splits entry into two parts
+ * hours and minutes based on delimiter or if there is none - it takes last two digits as minutes.
+ *
+ * @export
+ * @class SdsDurationBoxComponent
+ */
+class SdsDurationBoxComponent {
+    constructor(_durationInputResolver) {
+        this._durationInputResolver = _durationInputResolver;
+        /**
+         * Duration length expressed in minutes; when we allow empty values this property can be null.
+         *
+         * @type {(number | null)}
+         * @memberof SdsDurationBoxComponent
+         */
+        this.value = null;
+        this.valueChange = new EventEmitter();
+        /**
+         * Allow user to select empty value. You should provide emptyValueText in this case. The emitted value is 'null'.
+         *
+         * @type {boolean}
+         * @memberof SdsDurationBoxComponent
+         */
+        this.allowEmptyValue = true;
+        /**
+         * Text to be displayed when value is cleared
+         *
+         * @type {string}
+         * @memberof SdsDurationBoxComponent
+         */
+        this.emptyValueText = 'not set';
+        /**
+         * Width of component. By default 10rem.
+         *
+         * @type {string}
+         * @memberof SdsDurationBoxComponent
+         */
+        this.width = '10rem';
+        /**
+         * Specifies whether the UI component responds to user interaction.
+         *
+         * @type {boolean}
+         * @memberof SdsDurationBoxComponent
+         */
+        this.disabled = false;
+        /**
+         * Specifies whether to display the Clear button in the UI component.
+         *
+         * @type {boolean}
+         * @memberof SdsDurationBoxComponent
+         */
+        this.showClearButton = false;
+        /**
+         * Specifies how range limits are handled.
+         *
+         * @type {('fallbackToLastValue' | 'showValidationError')}
+         * @memberof SdsDurationBoxComponent
+         */
+        this.rangeViolationHandling = 'autoResolve';
+        /**
+         * Range violation message. Applicable when rangeViolationHandling is set to 'autoResolve'
+         *
+         * @type {string}
+         * @memberof SdsDurationBoxComponent
+         */
+        this.rangeViolationText = 'value is outside the valid range';
+        /**
+         * Indicates whether the editor's value is valid.
+         *
+         * @type {boolean}
+         * @memberof SdsDurationBoxComponent
+         */
+        this.isValid = true;
+        // public elementUUID = 'sds-db-' + crypto.randomUUID();
+        this.elementUUID = `sds-db-${Math.ceil(Math.random() * 1000000)}`;
+        this.inputValue = '';
+        this.showOptions = false;
+        this.isValueEmpty = false;
+        this.isValueSetInternally = false;
+        this._durationPipe = new SdsDurationFormatPipe();
+        this.optionsDropdownButton = {
+            icon: 'spindown',
+            stylingMode: 'text',
+            onClick: () => {
+                this.showOptions = !this.showOptions;
+            }
+        };
+        this.clearValueButton = {
+            icon: 'clear',
+            stylingMode: 'text',
+            elementAttr: { class: 'sds-durationbox-clear-button' },
+            onClick: () => {
+                this.applyOption(null);
+            }
+        };
+    }
+    ngAfterViewInit() {
+        if (this._validationRule) {
+            this._validationRule.validationCallback = () => {
+                return this.checkIfValid();
+            };
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['value'] ||
+            changes['min'] || changes['max'] ||
+            changes['rangeViolationHandling'] ||
+            changes['allowEmptyValue']) {
+            this.validateInputs();
+        }
+    }
+    ngOnInit() { }
+    blockNonNumberOrSemicolon(e) {
+        this.isValueSetInternally = false;
+    }
+    resolveInput() {
+        if (!this.isValueSetInternally) {
+            if (!this._durationInputResolver.isValidInput(this.inputValue)) {
+                // we have invalid input. use old value
+                this.setInputValueInternally(this.value);
+                this.setValidationStatusAndValidate(true);
+            }
+            else {
+                const resolvedValue = this._durationInputResolver.resolve(this.inputValue);
+                if (resolvedValue === null && this.allowEmptyValue) {
+                    this.setValue(null);
+                    this.setValidationStatusAndValidate(true);
+                }
+                else if (resolvedValue === null && !this.allowEmptyValue) {
+                    this.setValue(this._durationInputResolver.getDefaultValue());
+                    this.setValidationStatusAndValidate(true);
+                }
+                else {
+                    // make sure that the value is within the min/max period
+                    if (this._durationInputResolver.isValueWithinLimits(resolvedValue, this.min, this.max)) {
+                        this.setValue(resolvedValue);
+                        this.setValidationStatusAndValidate(true);
+                    }
+                    else {
+                        // use old value
+                        if (this.rangeViolationHandling === 'autoResolve') {
+                            this.setInputValueInternally(this.value);
+                            this.setValidationStatusAndValidate(true);
+                        }
+                        else {
+                            this.setInputValueInternally(resolvedValue);
+                            this.setValidationStatusAndValidate(false);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    applyOption(value) {
+        this.showOptions = false;
+        this.isValueSetInternally = false;
+        this.setValue(value);
+    }
+    checkIfValid() {
+        return this.isValid;
+    }
+    validateInputs() {
+        if (this.value === null) {
+            // handle null input
+            if (this.allowEmptyValue) {
+                this.setValue(null);
+            }
+            else {
+                this.setValue(this._durationInputResolver.getDefaultValue());
+                this.inputValue = this._durationPipe.transform(this.value, this.emptyValueText);
+            }
+            this.setValidationStatusAndValidate(true);
+        }
+        else {
+            // handle value input
+            if (this._durationInputResolver.isValueWithinLimits(this.value, this.min, this.max)) {
+                this.inputValue = this._durationPipe.transform(this.value, this.emptyValueText);
+                this.setValidationStatusAndValidate(true);
+            }
+            else {
+                // value is out of range
+                if (this.rangeViolationHandling === 'autoResolve') {
+                    this.setValue(this._durationInputResolver.getDefaultValue(this.min, this.max));
+                    this.inputValue = this._durationPipe.transform(this.value, this.emptyValueText);
+                    this.setValidationStatusAndValidate(true);
+                }
+                else {
+                    this.inputValue = this._durationPipe.transform(this.value, this.emptyValueText);
+                    this.setValidationStatusAndValidate(false);
+                }
+            }
+            this._validator?.instance.validate();
+        }
+    }
+    setValue(value) {
+        this.isValueEmpty = (value === null);
+        this.value = value;
+        this.valueChange.emit(this.value);
+        this.setInputValueInternally(value);
+    }
+    setInputValueInternally(value) {
+        this.isValueSetInternally = true;
+        setTimeout(() => {
+            this.inputValue = this._durationPipe.transform(value, this.emptyValueText);
+        }, 0);
+    }
+    setValidationStatusAndValidate(isWithinRange) {
+        this.isValid = (this.rangeViolationHandling === 'autoResolve') || isWithinRange;
+        this._validator?.instance.validate();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsDurationBoxComponent, deps: [{ token: DurationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsDurationBoxComponent, isStandalone: true, selector: "sds-duration-box", inputs: { value: "value", allowEmptyValue: "allowEmptyValue", emptyValueText: "emptyValueText", options: "options", width: "width", disabled: "disabled", showClearButton: "showClearButton", max: "max", min: "min", rangeViolationHandling: "rangeViolationHandling", rangeViolationText: "rangeViolationText" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "_validationRule", first: true, predicate: ["validationRule"], descendants: true }, { propertyName: "_validator", first: true, predicate: ["validator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<dx-text-box\r\n    #textbox\r\n    [id]=\"elementUUID\"\r\n    class=\"sds-durationbox\"\r\n    [(value)]=\"inputValue\"\r\n    (onKeyDown)=\"blockNonNumberOrSemicolon($event)\"\r\n    (onChange)=\"resolveInput()\"\r\n    [width]=\"width\"\r\n    [disabled]=\"disabled\"\r\n    >\r\n\r\n    <dx-validator \r\n        #validator>\r\n        <dxi-validation-rule\r\n            #validationRule\r\n            type=\"custom\"\r\n            [message]=\"rangeViolationText\"\r\n            [reevaluate]=\"true\"\r\n        ></dxi-validation-rule>\r\n    </dx-validator>\r\n\r\n    <dxi-button\r\n        *ngIf=\"allowEmptyValue && showClearButton\"\r\n        name=\"clearValue\"\r\n        location=\"after\"\r\n        [options]=\"clearValueButton\"\r\n    ></dxi-button>\r\n    \r\n    <dxi-button\r\n        *ngIf=\"options && options.length > 0\"\r\n        name=\"optionsDropdown\"\r\n        location=\"after\"\r\n        [options]=\"optionsDropdownButton\"\r\n    ></dxi-button>\r\n</dx-text-box>\r\n\r\n\r\n<dx-popover\r\n    target=\"#{{elementUUID}}\"\r\n    [(visible)]=\"showOptions\"\r\n    [minWidth]=\"width\"\r\n    [hideOnOutsideClick]=\"true\"\r\n    [wrapperAttr]=\"{ class: 'sds-durationbox-options-popover' }\"\r\n    >\r\n\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n        <dx-scroll-view>\r\n            <button\r\n                class=\"dropdown-item border-0\"\r\n                [class.selected] = \"isValueEmpty\"\r\n                (click)=\"applyOption(null)\"\r\n                > {{ emptyValueText}}\r\n        </button>\r\n\r\n            <div *ngFor=\"let option of options\">\r\n                <button\r\n                    class=\"dropdown-item border-0\"\r\n                    [class.selected] = \"option === value\"\r\n                    (click)=\"applyOption(option)\"\r\n                > {{option | sdsDurationFormat}}\r\n            </button>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </div>\r\n</dx-popover>", styles: ["::ng-deep .sds-durationbox .sds-durationbox-clear-button .dx-icon{color:#999}::ng-deep .sds-durationbox-options-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-durationbox-options-popover .dropdown-item{padding:.5rem}::ng-deep .sds-durationbox-options-popover .dropdown-item:hover{background-color:var(--bs-gray-100)}::ng-deep .sds-durationbox-options-popover .dropdown-item:focus{outline:none}::ng-deep .sds-durationbox-options-popover .dropdown-item.selected{background-color:var(--bs-gray-300)}\n"], dependencies: [{ kind: "ngmodule", type: DxTextBoxModule }, { kind: "component", type: i2.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "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", "isDirtyChange", "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"] }, { kind: "component", type: i3.DxiButtonComponent, selector: "dxi-button", inputs: ["location", "name", "options", "cssClass", "disabled", "hint", "icon", "onClick", "template", "text", "visible"] }, { kind: "directive", type: i4.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "ngmodule", type: DxValidatorModule }, { kind: "component", type: i2.DxValidatorComponent, selector: "dx-validator", inputs: ["adapter", "elementAttr", "height", "name", "validationGroup", "validationRules", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValidated", "adapterChange", "elementAttrChange", "heightChange", "nameChange", "validationGroupChange", "validationRulesChange", "widthChange"] }, { kind: "component", type: i3.DxiValidationRuleComponent, selector: "dxi-validation-rule", inputs: ["message", "trim", "type", "ignoreEmptyValue", "max", "min", "reevaluate", "validationCallback", "comparisonTarget", "comparisonType", "pattern"] }, { kind: "ngmodule", type: DxiValidationRuleModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DxiButtonModule }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i5.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "ngmodule", type: DxTemplateModule }, { kind: "ngmodule", type: DxScrollViewModule }, { kind: "component", type: i6.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: SdsDurationFormatPipe, name: "sdsDurationFormat" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsDurationBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-duration-box', standalone: true, imports: [
+                        DxTextBoxModule,
+                        DxValidatorModule,
+                        DxiValidationRuleModule,
+                        NgIf,
+                        DxiButtonModule,
+                        DxPopoverModule,
+                        DxTemplateModule,
+                        DxScrollViewModule,
+                        NgFor,
+                        SdsDurationFormatPipe,
+                    ], template: "<dx-text-box\r\n    #textbox\r\n    [id]=\"elementUUID\"\r\n    class=\"sds-durationbox\"\r\n    [(value)]=\"inputValue\"\r\n    (onKeyDown)=\"blockNonNumberOrSemicolon($event)\"\r\n    (onChange)=\"resolveInput()\"\r\n    [width]=\"width\"\r\n    [disabled]=\"disabled\"\r\n    >\r\n\r\n    <dx-validator \r\n        #validator>\r\n        <dxi-validation-rule\r\n            #validationRule\r\n            type=\"custom\"\r\n            [message]=\"rangeViolationText\"\r\n            [reevaluate]=\"true\"\r\n        ></dxi-validation-rule>\r\n    </dx-validator>\r\n\r\n    <dxi-button\r\n        *ngIf=\"allowEmptyValue && showClearButton\"\r\n        name=\"clearValue\"\r\n        location=\"after\"\r\n        [options]=\"clearValueButton\"\r\n    ></dxi-button>\r\n    \r\n    <dxi-button\r\n        *ngIf=\"options && options.length > 0\"\r\n        name=\"optionsDropdown\"\r\n        location=\"after\"\r\n        [options]=\"optionsDropdownButton\"\r\n    ></dxi-button>\r\n</dx-text-box>\r\n\r\n\r\n<dx-popover\r\n    target=\"#{{elementUUID}}\"\r\n    [(visible)]=\"showOptions\"\r\n    [minWidth]=\"width\"\r\n    [hideOnOutsideClick]=\"true\"\r\n    [wrapperAttr]=\"{ class: 'sds-durationbox-options-popover' }\"\r\n    >\r\n\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n        <dx-scroll-view>\r\n            <button\r\n                class=\"dropdown-item border-0\"\r\n                [class.selected] = \"isValueEmpty\"\r\n                (click)=\"applyOption(null)\"\r\n                > {{ emptyValueText}}\r\n        </button>\r\n\r\n            <div *ngFor=\"let option of options\">\r\n                <button\r\n                    class=\"dropdown-item border-0\"\r\n                    [class.selected] = \"option === value\"\r\n                    (click)=\"applyOption(option)\"\r\n                > {{option | sdsDurationFormat}}\r\n            </button>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </div>\r\n</dx-popover>", styles: ["::ng-deep .sds-durationbox .sds-durationbox-clear-button .dx-icon{color:#999}::ng-deep .sds-durationbox-options-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-durationbox-options-popover .dropdown-item{padding:.5rem}::ng-deep .sds-durationbox-options-popover .dropdown-item:hover{background-color:var(--bs-gray-100)}::ng-deep .sds-durationbox-options-popover .dropdown-item:focus{outline:none}::ng-deep .sds-durationbox-options-popover .dropdown-item.selected{background-color:var(--bs-gray-300)}\n"] }]
+        }], ctorParameters: () => [{ type: DurationService }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], allowEmptyValue: [{
+                type: Input
+            }], emptyValueText: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], showClearButton: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], rangeViolationHandling: [{
+                type: Input
+            }], rangeViolationText: [{
+                type: Input
+            }], _validationRule: [{
+                type: ViewChild,
+                args: ['validationRule', { static: false }]
+            }], _validator: [{
+                type: ViewChild,
+                args: ['validator', { static: false }]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsDurationBoxComponent };
+//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-duration-box.mjs.map

package/fesm2022/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.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/spicainternational-ngx-sds-components-src-lib-duration-box.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n    providedIn: 'root',\r\n})\r\nexport class DurationService {\r\n    \r\n    constructor() {}\r\n\r\n    public resolve(input: string): number | null{\r\n        if (!input || input.length === 0) {\r\n            return null;\r\n        }\r\n\r\n        const inputSegments = input.split(':');\r\n        if (inputSegments.length > 2) {\r\n            //invalid input\r\n            return 0;\r\n        } else if (inputSegments.length == 2){\r\n            // we have hrs and minutes\r\n            const hrs = parseInt(inputSegments[0] ? inputSegments[0] : '0');\r\n            const mins = parseInt(inputSegments[1] ? inputSegments[1] : '0');\r\n            const totalMins = (hrs * 60) + mins;\r\n\r\n            return totalMins;\r\n        } else if (inputSegments.length == 1) {\r\n            // take last two digits as mins\r\n            const nonSeparated = inputSegments[0];\r\n\r\n            let totalMins = 0;\r\n            if (nonSeparated.length <= 2) {\r\n                totalMins = parseInt(nonSeparated)\r\n            } else {\r\n                const lastIndex = nonSeparated.length - 2;\r\n                const part1 = nonSeparated.slice(0, lastIndex);\r\n                const part2 = nonSeparated.slice(lastIndex);\r\n                const hrs = parseInt(part1);\r\n                const mins = parseInt(part2);\r\n                totalMins = (hrs * 60) + mins;            \r\n            }\r\n            return totalMins;\r\n        }\r\n        return 0;        \r\n    }\r\n\r\n    public isValidInput(input: string) {\r\n        if (input === '') {\r\n            return true;\r\n        }\r\n\r\n        const regexNumbersOnly = /^[+-]?\\d+$/;\r\n        const regexColonSeparated =  /^[+-]?\\d+:\\d+$/;\r\n        return regexNumbersOnly.test(input) || regexColonSeparated.test(input);\r\n    }\r\n\r\n    public getDefaultValue(min?: number, max?: number): number {\r\n        let defaultValue = 0;\r\n        // try keeping the 0 as default\r\n        // if it is outside the min/max then adjust\r\n        if (min) {\r\n            defaultValue = Math.max(defaultValue, min);\r\n        }\r\n        if (max) {\r\n            defaultValue = Math.min(defaultValue, max);\r\n        }\r\n        return defaultValue;\r\n    }\r\n\r\n    public isValueWithinLimits(value: number, min?: number, max?: number): boolean {\r\n        return !((min != undefined && value < min) || (max != undefined && value > max))\r\n    }  \r\n\r\n}\r\n","import { AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { SdsDurationFormatPipe } from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\r\nimport { DxValidatorComponent, DxTextBoxModule, DxValidatorModule } from 'devextreme-angular';\r\nimport { DxiValidationRuleComponent, DxiValidationRuleModule, DxiButtonModule } from 'devextreme-angular/ui/nested';\r\nimport { DurationBoxRangeViolationHandling } from './duration-box.types';\r\nimport { DurationService } from './duration.service';\r\n// import { SdsDurationFormatPipe as SdsDurationFormatPipe_1 } from '../duration-pipe/duration-format.pipe';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\nimport { DxTemplateModule } from 'devextreme-angular/core';\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { NgIf, NgFor } from '@angular/common';\r\n\r\n/**\r\n * Component allows user to enter duration in h:mm format. User may also select no value is this is applicable to the \r\n * use case. A list of pre-defined durations can be provided for easier selection.\r\n * \r\n * The auto resolve function tries to convert entered text into minutes. The algorithm splits entry into two parts \r\n * hours and minutes based on delimiter or if there is none - it takes last two digits as minutes.\r\n *\r\n * @export\r\n * @class SdsDurationBoxComponent\r\n */\r\n@Component({\r\n    selector: 'sds-duration-box',\r\n    templateUrl: './duration-box.component.html',\r\n    styleUrls: ['./duration-box.component.scss'],\r\n    standalone: true,\r\n    imports: [\r\n        DxTextBoxModule,\r\n        DxValidatorModule,\r\n        DxiValidationRuleModule,\r\n        NgIf,\r\n        DxiButtonModule,\r\n        DxPopoverModule,\r\n        DxTemplateModule,\r\n        DxScrollViewModule,\r\n        NgFor,\r\n        SdsDurationFormatPipe,\r\n    ],\r\n})\r\nexport class SdsDurationBoxComponent implements OnInit, OnChanges, AfterViewInit {\r\n    /**\r\n     * Duration length expressed in minutes; when we allow empty values this property can be null.\r\n     *\r\n     * @type {(number | null)}\r\n     * @memberof SdsDurationBoxComponent\r\n     */\r\n    @Input() value: number | null = null;\r\n    @Output() valueChange = new EventEmitter<number | null>();\r\n\r\n    /**\r\n     * Allow user to select empty value. You should provide emptyValueText in this case. The emitted value is 'null'.\r\n     *\r\n     * @type {boolean}\r\n     * @memberof SdsDurationBoxComponent\r\n     */\r\n    @Input() allowEmptyValue: boolean = true;\r\n\r\n    /**\r\n     * Text to be displayed when value is cleared\r\n     *\r\n     * @type {string}\r\n     * @memberof SdsDurationBoxComponent\r\n     */\r\n    @Input() emptyValueText: string = 'not set';\r\n\r\n    /**\r\n     * Array of pre-defined durations that will be displayed in dropdown for easier selection.\r\n     *\r\n     * @type {number[]}\r\n     * @memberof SdsDurationBoxComponent\r\n     */\r\n    @Input() options?: number[];\r\n    \r\n    /**\r\n     * Width of component. By default 10rem.\r\n     *\r\n     * @type {string}\r\n     * @memberof SdsDurationBoxComponent\r\n     */\r\n    @Input() width: string = '10rem';\r\n\r\n    /**\r\n     * Specifies whether the UI component responds to user interaction.\r\n     *\r\n     * @type {boolean}\r\n     * @memberof SdsDurationBoxComponent\r\n     */\r\n    @Input() disabled: boolean = false;\r\n    \r\n    /**\r\n     * Specifies whether to display the Clear button in the UI component.\r\n     *\r\n     * @type {boolean}\r\n     * @memberof SdsDurationBoxComponent\r\n     */\r\n    @Input() showClearButton: boolean = false;\r\n\r\n    /**\r\n     * The maximum value accepted by the duration box.\r\n     *\r\n     * @type {number}\r\n     * @memberof SdsDurationBoxComponent\r\n     */\r\n    @Input() max?: number;\r\n\r\n    /**\r\n     * The minimum value accepted by the duration box.\r\n     *\r\n     * @type {number}\r\n     * @memberof SdsDurationBoxComponent\r\n     */    \r\n    @Input() min?: number;\r\n\r\n    /**\r\n     * Specifies how range limits are handled.\r\n     *\r\n     * @type {('fallbackToLastValue' | 'showValidationError')}\r\n     * @memberof SdsDurationBoxComponent\r\n     */\r\n    @Input() rangeViolationHandling: DurationBoxRangeViolationHandling = 'autoResolve';\r\n\r\n    /**\r\n     * Range violation message. Applicable when rangeViolationHandling is set to 'autoResolve'\r\n     *\r\n     * @type {string}\r\n     * @memberof SdsDurationBoxComponent\r\n     */\r\n    @Input() rangeViolationText: string = 'value is outside the valid range';\r\n\r\n    /**\r\n     * Indicates whether the editor's value is valid.\r\n     *\r\n     * @type {boolean}\r\n     * @memberof SdsDurationBoxComponent\r\n     */\r\n    public isValid: boolean = true;\r\n\r\n\r\n\r\n    // public elementUUID = 'sds-db-' + crypto.randomUUID();\r\n    public elementUUID = `sds-db-${Math.ceil(Math.random() * 1000000)}`;\r\n\r\n\r\n    public inputValue: string = '';\r\n    public showOptions: boolean = false;\r\n    \r\n    public optionsDropdownButton;\r\n    public clearValueButton;\r\n\r\n    public isValueEmpty = false;\r\n\r\n\r\n    @ViewChild('validationRule', { static: false }) private _validationRule: DxiValidationRuleComponent | undefined;\r\n    @ViewChild('validator', { static: false }) private _validator: DxValidatorComponent | undefined;\r\n\r\n    private isValueSetInternally = false;\r\n    private _durationPipe: SdsDurationFormatPipe;\r\n\r\n    constructor(\r\n        private _durationInputResolver: DurationService,\r\n    ) {\r\n        this._durationPipe = new SdsDurationFormatPipe();\r\n        \r\n        this.optionsDropdownButton =  {\r\n            icon: 'spindown',\r\n            stylingMode: 'text',\r\n    \r\n            onClick: () => {\r\n                this.showOptions = !this.showOptions;\r\n            }\r\n        }\r\n\r\n        this.clearValueButton =  {\r\n            icon: 'clear',\r\n            stylingMode: 'text',\r\n            elementAttr: { class: 'sds-durationbox-clear-button' },\r\n            onClick: () => {\r\n                this.applyOption(null);\r\n            }\r\n        }        \r\n    }\r\n    ngAfterViewInit(): void {\r\n        if (this._validationRule) {\r\n            this._validationRule.validationCallback = () => { \r\n                return this.checkIfValid() \r\n            };\r\n        }\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (\r\n            changes['value'] || \r\n            changes['min'] || changes['max'] || \r\n            changes['rangeViolationHandling'] ||\r\n            changes['allowEmptyValue']\r\n            ) {\r\n            this.validateInputs();\r\n        } \r\n    }\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public blockNonNumberOrSemicolon(e: any) {\r\n        this.isValueSetInternally = false;\r\n    }\r\n\r\n    public resolveInput() {\r\n        if (!this.isValueSetInternally){\r\n            if (!this._durationInputResolver.isValidInput(this.inputValue)) {\r\n                // we have invalid input. use old value\r\n                this.setInputValueInternally(this.value);\r\n                this.setValidationStatusAndValidate(true);\r\n            } else {\r\n                const resolvedValue = this._durationInputResolver.resolve(this.inputValue);\r\n                if (resolvedValue === null && this.allowEmptyValue) {\r\n                    this.setValue(null);\r\n                    this.setValidationStatusAndValidate(true);\r\n                } else if (resolvedValue === null && !this.allowEmptyValue) {\r\n                    this.setValue(this._durationInputResolver.getDefaultValue());\r\n                    this.setValidationStatusAndValidate(true);\r\n                } else {\r\n                    // make sure that the value is within the min/max period\r\n                    if (this._durationInputResolver.isValueWithinLimits(resolvedValue as number, this.min, this.max)) {\r\n                        this.setValue(resolvedValue);\r\n                        this.setValidationStatusAndValidate(true);\r\n                    } else {\r\n                        // use old value\r\n                        if (this.rangeViolationHandling === 'autoResolve'){\r\n                            this.setInputValueInternally(this.value);\r\n                            this.setValidationStatusAndValidate(true);\r\n                        } else {\r\n                            this.setInputValueInternally(resolvedValue);\r\n                            this.setValidationStatusAndValidate(false);\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    public applyOption(value: number | null){\r\n        this.showOptions = false;\r\n        this.isValueSetInternally = false;\r\n        this.setValue(value);\r\n    }\r\n\r\n    public checkIfValid() {\r\n        return this.isValid;\r\n    }\r\n\r\n    private validateInputs(){\r\n        if (this.value === null) {\r\n            // handle null input\r\n            if (this.allowEmptyValue) {\r\n                this.setValue(null);\r\n            } else {\r\n                this.setValue(this._durationInputResolver.getDefaultValue());\r\n                this.inputValue = this._durationPipe.transform(this.value, this.emptyValueText);\r\n            }\r\n            this.setValidationStatusAndValidate(true);\r\n        } else {\r\n            // handle value input\r\n            if (this._durationInputResolver.isValueWithinLimits(this.value, this.min, this.max)){\r\n                this.inputValue = this._durationPipe.transform(this.value, this.emptyValueText);\r\n                this.setValidationStatusAndValidate(true);\r\n            } else {\r\n                // value is out of range\r\n                if (this.rangeViolationHandling === 'autoResolve'){\r\n                    this.setValue(this._durationInputResolver.getDefaultValue(this.min, this.max));\r\n                    this.inputValue = this._durationPipe.transform(this.value, this.emptyValueText);\r\n                    this.setValidationStatusAndValidate(true);\r\n                } else {\r\n                    this.inputValue = this._durationPipe.transform(this.value, this.emptyValueText);\r\n                    this.setValidationStatusAndValidate(false);\r\n                }\r\n            }\r\n            this._validator?.instance.validate();\r\n        }        \r\n    }\r\n\r\n    private setValue(value: number | null){\r\n        this.isValueEmpty = (value === null);\r\n        this.value = value;\r\n        this.valueChange.emit(this.value);\r\n        this.setInputValueInternally(value);\r\n    }\r\n\r\n    private setInputValueInternally(value: number | null){\r\n        this.isValueSetInternally = true;\r\n        setTimeout(() => {\r\n            this.inputValue = this._durationPipe.transform(value, this.emptyValueText);\r\n        }, 0);\r\n    }\r\n\r\n    private setValidationStatusAndValidate(isWithinRange: boolean){\r\n        this.isValid = (this.rangeViolationHandling === 'autoResolve') || isWithinRange;\r\n        this._validator?.instance.validate();\r\n    }\r\n\r\n}\r\n","<dx-text-box\r\n    #textbox\r\n    [id]=\"elementUUID\"\r\n    class=\"sds-durationbox\"\r\n    [(value)]=\"inputValue\"\r\n    (onKeyDown)=\"blockNonNumberOrSemicolon($event)\"\r\n    (onChange)=\"resolveInput()\"\r\n    [width]=\"width\"\r\n    [disabled]=\"disabled\"\r\n    >\r\n\r\n    <dx-validator \r\n        #validator>\r\n        <dxi-validation-rule\r\n            #validationRule\r\n            type=\"custom\"\r\n            [message]=\"rangeViolationText\"\r\n            [reevaluate]=\"true\"\r\n        ></dxi-validation-rule>\r\n    </dx-validator>\r\n\r\n    <dxi-button\r\n        *ngIf=\"allowEmptyValue && showClearButton\"\r\n        name=\"clearValue\"\r\n        location=\"after\"\r\n        [options]=\"clearValueButton\"\r\n    ></dxi-button>\r\n    \r\n    <dxi-button\r\n        *ngIf=\"options && options.length > 0\"\r\n        name=\"optionsDropdown\"\r\n        location=\"after\"\r\n        [options]=\"optionsDropdownButton\"\r\n    ></dxi-button>\r\n</dx-text-box>\r\n\r\n\r\n<dx-popover\r\n    target=\"#{{elementUUID}}\"\r\n    [(visible)]=\"showOptions\"\r\n    [minWidth]=\"width\"\r\n    [hideOnOutsideClick]=\"true\"\r\n    [wrapperAttr]=\"{ class: 'sds-durationbox-options-popover' }\"\r\n    >\r\n\r\n    <div *dxTemplate=\"let data of 'content'\">\r\n        <dx-scroll-view>\r\n            <button\r\n                class=\"dropdown-item border-0\"\r\n                [class.selected] = \"isValueEmpty\"\r\n                (click)=\"applyOption(null)\"\r\n                > {{ emptyValueText}}\r\n        </button>\r\n\r\n            <div *ngFor=\"let option of options\">\r\n                <button\r\n                    class=\"dropdown-item border-0\"\r\n                    [class.selected] = \"option === value\"\r\n                    (click)=\"applyOption(option)\"\r\n                > {{option | sdsDurationFormat}}\r\n            </button>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </div>\r\n</dx-popover>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.DurationService"],"mappings":"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"}

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

@@ -0,0 +1,34 @@
+import * as i0 from '@angular/core';
+import { Pipe } from '@angular/core';
+
+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 '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsDurationFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SdsDurationFormatPipe, isStandalone: true, name: "sdsDurationFormat" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsDurationFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sdsDurationFormat',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsDurationFormatPipe };
+//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-duration-pipe.mjs.map

package/fesm2022/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/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    standalone: true,\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAMa,qBAAqB,CAAA;AAC9B,IAAA,SAAS,CAAC,KAAoB,EAAE,cAAA,GAAyB,EAAE,EAAA;AACvD,QAAA,IAAI,KAAK,KAAK,IAAI,EAAE;AAChB,YAAA,OAAO,cAAc;;AAClB,aAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAClC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,YAAA,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;YACvB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;AACpC,YAAA,MAAM,IAAI,GAAG,KAAK,GAAG,EAAE;AACvB,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;;AAE9G,QAAA,OAAO,EAAE;;+GAXJ,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA;6GAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,mBAAA,EAAA,CAAA,CAAA;;4FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACF,oBAAA,IAAI,EAAE,mBAAmB;AACzB,oBAAA,UAAU,EAAE,IAAI;AACnB,iBAAA;;;ACLD;;AAEG;;;;"}

package/fesm2022/spicainternational-ngx-sds-components-src-lib-ellipsis.mjs

@@ -0,0 +1,59 @@
+import * as i0 from '@angular/core';
+import { HostListener, Input, Directive } from '@angular/core';
+
+/*
+ * Parent must have a fixed width for this directive to work properly.
+ * Ellipsis will not appear without a parent width.
+ *
+ * tooltipText: @Input overrides the element's innerHtml with the provided
+ *  string variable in the title, used to prevent HTML tags from appearing
+ *  in the mouseover title. This will override text from an Input node.
+ */
+class SdsEllipsisDirective {
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    ngAfterViewInit() {
+        this.element = this.elementRef.nativeElement;
+        this.renderer.setStyle(this.element, 'display', 'block');
+        this.renderer.setStyle(this.element, 'overflow', 'hidden');
+        this.renderer.setStyle(this.element, 'textOverflow', 'ellipsis');
+        this.renderer.setStyle(this.element, 'whiteSpace', 'nowrap');
+    }
+    enter() {
+        if (this.element && this.element.offsetWidth < this.element.scrollWidth) {
+            // this.renderer.setStyle(this.element, 'cursor', 'pointer');
+            if (this.tooltipText !== undefined && this.tooltipText.length > 0) {
+                this.element.title = this.tooltipText;
+                return;
+            }
+            else if (this.element.nodeName === 'INPUT') {
+                this.element.title = this.elementRef?.nativeElement?.value;
+                return;
+            }
+            this.element.title = this.element.innerHTML;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsEllipsisDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SdsEllipsisDirective, isStandalone: true, selector: "[sdsEllipsis]", inputs: { tooltipText: "tooltipText" }, host: { listeners: { "mouseenter": "enter()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsEllipsisDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sdsEllipsis]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipText: [{
+                type: Input
+            }], enter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsEllipsisDirective };
+//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-ellipsis.mjs.map

package/fesm2022/spicainternational-ngx-sds-components-src-lib-ellipsis.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-ellipsis.mjs","sources":["../../../projects/ngx-sds-components/src/lib/ellipsis/directives/ellipsis.directive.ts","../../../projects/ngx-sds-components/src/lib/ellipsis/spicainternational-ngx-sds-components-src-lib-ellipsis.ts"],"sourcesContent":["import { AfterViewInit, Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';\r\n\r\n/*\r\n * Parent must have a fixed width for this directive to work properly.\r\n * Ellipsis will not appear without a parent width.\r\n *\r\n * tooltipText: @Input overrides the element's innerHtml with the provided\r\n *  string variable in the title, used to prevent HTML tags from appearing\r\n *  in the mouseover title. This will override text from an Input node.\r\n */\r\n@Directive({\r\n    selector: '[sdsEllipsis]',\r\n    standalone: true,\r\n})\r\nexport class SdsEllipsisDirective implements AfterViewInit {\r\n    @Input() public tooltipText?: string;\r\n\r\n    private element?: HTMLElement;\r\n\r\n    public constructor(\r\n        private elementRef: ElementRef,\r\n        private renderer: Renderer2\r\n    ) {}\r\n\r\n    public ngAfterViewInit(): void {\r\n        this.element = this.elementRef.nativeElement;\r\n        this.renderer.setStyle(this.element, 'display', 'block');\r\n        this.renderer.setStyle(this.element, 'overflow', 'hidden');\r\n        this.renderer.setStyle(this.element, 'textOverflow', 'ellipsis');\r\n        this.renderer.setStyle(this.element, 'whiteSpace', 'nowrap');\r\n    }\r\n\r\n    @HostListener('mouseenter') public enter(): void {\r\n        if (this.element && this.element.offsetWidth < this.element.scrollWidth) {\r\n            // this.renderer.setStyle(this.element, 'cursor', 'pointer');\r\n\r\n            if (this.tooltipText !== undefined && this.tooltipText.length > 0) {\r\n                this.element.title = this.tooltipText;\r\n                return;\r\n            } else if (this.element.nodeName === 'INPUT') {\r\n                this.element.title = this.elementRef?.nativeElement?.value;\r\n                return;\r\n            }\r\n            this.element.title = this.element.innerHTML;\r\n        }\r\n    }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAEA;;;;;;;AAOG;MAKU,oBAAoB,CAAA;IAK7B,WACY,CAAA,UAAsB,EACtB,QAAmB,EAAA;QADnB,IAAU,CAAA,UAAA,GAAV,UAAU;QACV,IAAQ,CAAA,QAAA,GAAR,QAAQ;;IAGb,eAAe,GAAA;QAClB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AAC5C,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;AACxD,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC;AAC1D,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,EAAE,UAAU,CAAC;AAChE,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,CAAC;;IAG7B,KAAK,GAAA;AACpC,QAAA,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE;;AAGrE,YAAA,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/D,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW;gBACrC;;iBACG,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,OAAO,EAAE;AAC1C,gBAAA,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK;gBAC1D;;YAEJ,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS;;;+GA7B1C,oBAAoB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAJhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,UAAU,EAAE,IAAI;AACnB,iBAAA;uGAEmB,WAAW,EAAA,CAAA;sBAA1B;gBAiBkC,KAAK,EAAA,CAAA;sBAAvC,YAAY;uBAAC,YAAY;;;AChC9B;;AAEG;;;;"}