@ship-ui/core 0.15.26 → 0.15.29

package/fesm2022/ship-ui-core.mjs

@@ -1625,8 +1625,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class ShipButtonGroupComponent {
+    constructor() {
+        this.id = '--' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 12);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipButtonGroupComponent, isStandalone: true, selector: "sh-button-group", ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipButtonGroupComponent, isStandalone: true, selector: "sh-button-group", host: { properties: { "style.--btng-id": "id" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -1639,6 +1642,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
     <ng-content />
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[style.--btng-id]': 'id',
+                    },
                 }]
         }] });
 
@@ -6078,8 +6084,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class ShipTabsComponent {
+    constructor() {
+        this.id = '--' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 12);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipTabsComponent, isStandalone: true, selector: "sh-tabs", ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ShipTabsComponent, isStandalone: true, selector: "sh-tabs", host: { properties: { "style.--tabs-id": "id" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -6092,6 +6101,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
     <ng-content />
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[style.--tabs-id]': 'id',
+                    },
                 }]
         }] });
 
@@ -6550,6 +6562,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['drop', ['$event']]
             }] } });
 
+class ShipInputMaskDirective {
+    constructor() {
+        this.#selfRef = inject(ElementRef);
+        this.#renderer = inject(Renderer2);
+        this.shInputMask = input('(999) 999-9999', ...(ngDevMode ? [{ debugName: "shInputMask" }] : []));
+    }
+    #selfRef;
+    #renderer;
+    onInput(event) {
+        const inputElement = this.#selfRef.nativeElement;
+        const oldRawValue = inputElement.value;
+        const newRawValue = event.target.value;
+        const oldCursorPos = inputElement.selectionStart ?? 0;
+        const newCleanValue = this.#cleanValue(newRawValue);
+        const maskedValue = this.#applyMask(newCleanValue);
+        this.#renderer.setProperty(inputElement, 'value', maskedValue);
+        const newCursorPos = this.#getNewCursorPosition(maskedValue, oldRawValue, oldCursorPos);
+        inputElement.setSelectionRange(newCursorPos, newCursorPos);
+    }
+    #getNewCursorPosition(maskedValue, oldRawValue, oldCursorPos) {
+        let digitsBeforeCursor = 0;
+        for (let i = 0; i < oldCursorPos; i++) {
+            if (oldRawValue[i] && oldRawValue[i].match(/\d/)) {
+                digitsBeforeCursor++;
+            }
+        }
+        let newCursorPos = 0;
+        let digitsFound = 0;
+        while (newCursorPos < maskedValue.length && digitsFound < digitsBeforeCursor) {
+            if (maskedValue[newCursorPos].match(/\d/)) {
+                digitsFound++;
+            }
+            newCursorPos++;
+        }
+        return newCursorPos;
+    }
+    #cleanValue(value) {
+        if (!value)
+            return '';
+        return value.replace(/\D/g, '');
+    }
+    #applyMask(cleanValue) {
+        const inputMask = this.shInputMask();
+        if (typeof inputMask === 'function') {
+            return inputMask(cleanValue) ?? '';
+        }
+        const pattern = inputMask;
+        let masked = '';
+        let digitIndex = 0;
+        for (let i = 0; i < pattern.length && digitIndex < cleanValue.length; i++) {
+            const maskChar = pattern[i];
+            const digitChar = cleanValue[digitIndex];
+            if (maskChar === '9') {
+                masked += digitChar;
+                digitIndex++;
+            }
+            else {
+                masked += maskChar;
+            }
+        }
+        return masked;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipInputMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: ShipInputMaskDirective, isStandalone: true, selector: "[shInputMask]", inputs: { shInputMask: { classPropertyName: "shInputMask", publicName: "shInputMask", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipInputMaskDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[shInputMask]',
+                    standalone: true,
+                }]
+        }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+
 class ShipPreventWheelDirective {
     wheel(event) {
         event.preventDefault();
@@ -6780,5 +6868,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, ShipBlueprintComponent, ShipButtonComponent, ShipButtonGroupComponent, ShipCardComponent, ShipCheckboxComponent, ShipChipComponent, ShipColorPickerComponent, ShipDatepickerComponent, ShipDatepickerInputComponent, ShipDaterangeInputComponent, ShipDialogComponent, ShipDialogService, ShipDividerComponent, ShipEventCardComponent, ShipFileDragDropDirective, ShipFileUploadComponent, ShipFormFieldComponent, ShipIconComponent, ShipListComponent, ShipMenuComponent, ShipPopoverComponent, ShipPreventWheelDirective, ShipProgressBarComponent, ShipRadioComponent, ShipRangeSliderComponent, ShipResizeDirective, ShipSelectComponent, ShipSidenavComponent, ShipSortDirective, ShipSortableComponent, ShipSortableDirective, ShipSpinnerComponent, ShipStepperComponent, ShipStickyColumnsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, TEST_NODES, moveIndex, watchHostClass };
+export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, ShipBlueprintComponent, ShipButtonComponent, ShipButtonGroupComponent, ShipCardComponent, ShipCheckboxComponent, ShipChipComponent, ShipColorPickerComponent, ShipDatepickerComponent, ShipDatepickerInputComponent, ShipDaterangeInputComponent, ShipDialogComponent, ShipDialogService, ShipDividerComponent, ShipEventCardComponent, ShipFileDragDropDirective, ShipFileUploadComponent, ShipFormFieldComponent, ShipIconComponent, ShipInputMaskDirective, ShipListComponent, ShipMenuComponent, ShipPopoverComponent, ShipPreventWheelDirective, ShipProgressBarComponent, ShipRadioComponent, ShipRangeSliderComponent, ShipResizeDirective, ShipSelectComponent, ShipSidenavComponent, ShipSortDirective, ShipSortableComponent, ShipSortableDirective, ShipSpinnerComponent, ShipStepperComponent, ShipStickyColumnsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, TEST_NODES, moveIndex, watchHostClass };
 //# sourceMappingURL=ship-ui-core.mjs.map