ms-design-system 0.0.58 → 0.0.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ms-design-system.mjs +524 -145
- package/fesm2022/ms-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/scss/components/_breadcrumb.scss +1 -0
- package/src/assets/scss/components/_button.scss +6 -1
- package/src/assets/scss/components/_checkbox.scss +1 -2
- package/src/assets/scss/components/_dropdown.scss +3 -0
- package/src/assets/scss/components/_pagination.scss +18 -7
- package/src/assets/scss/components/_tabs.scss +279 -279
- package/src/assets/scss/components/_text-area.scss +15 -2
- package/src/assets/scss/components/_text-field.scss +82 -46
- package/src/assets/scss/components/_toggle-button.scss +130 -128
- package/types/ms-design-system.d.ts +72 -6
|
@@ -5,17 +5,18 @@ import { Input, Component, EventEmitter, Output, Injectable, signal, HostListene
|
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
6
|
import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import * as i1 from '@angular/platform-browser';
|
|
8
|
-
import * as
|
|
8
|
+
import * as i3 from 'ng-inline-svg-2';
|
|
9
9
|
import { InlineSVGModule } from 'ng-inline-svg-2';
|
|
10
10
|
import { Subject, BehaviorSubject } from 'rxjs';
|
|
11
|
-
import
|
|
11
|
+
import { HttpClient } from '@angular/common/http';
|
|
12
|
+
import * as i2$1 from '@angular/router';
|
|
12
13
|
import { NavigationEnd } from '@angular/router';
|
|
13
14
|
import { filter } from 'rxjs/operators';
|
|
14
15
|
import * as i1$2 from 'ng-inline-svg';
|
|
15
16
|
import { InlineSVGModule as InlineSVGModule$1 } from 'ng-inline-svg';
|
|
16
17
|
|
|
17
18
|
const ICONS = {
|
|
18
|
-
"info-circle": "<svg xmlns=\"http://www.w3.org/2000/svg\"
|
|
19
|
+
"info-circle": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-info-icon lucide-info\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></svg>",
|
|
19
20
|
"download": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line\"><path d=\"M12 17V3\"/><path d=\"m6 11 6 6 6-6\"/><path d=\"M19 21H5\"/></svg>",
|
|
20
21
|
"setting": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-settings-icon lucide-settings\"><path d=\"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>",
|
|
21
22
|
"add": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-plus-icon lucide-plus\"><path d=\"M5 12h14\"/><path d=\"M12 5v14\"/></svg>",
|
|
@@ -25,7 +26,7 @@ const ICONS = {
|
|
|
25
26
|
"chevron-up": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-up-icon lucide-chevron-up\"><path d=\"m18 15-6-6-6 6\"/></svg>",
|
|
26
27
|
"chevron-left": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-left-icon lucide-chevron-left\"><path d=\"m15 18-6-6 6-6\"/></svg>",
|
|
27
28
|
"bell": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-bell-icon lucide-bell\"><path d=\"M10.268 21a2 2 0 0 0 3.464 0\"/><path d=\"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326\"/></svg>",
|
|
28
|
-
"close": `<svg xmlns="http://www.w3.org/2000/svg"
|
|
29
|
+
"close": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`,
|
|
29
30
|
"search": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21 21-4.34-4.34\"/><circle cx=\"11\" cy=\"11\" r=\"8\"/></svg>",
|
|
30
31
|
"calender": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-calendar-icon lucide-calendar\"><path d=\"M8 2v4\"/><path d=\"M16 2v4\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"/><path d=\"M3 10h18\"/></svg>",
|
|
31
32
|
"refresh": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-rotate-ccw-icon lucide-rotate-ccw\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"/><path d=\"M3 3v5h5\"/></svg>",
|
|
@@ -1098,7 +1099,7 @@ class MsToggle {
|
|
|
1098
1099
|
useExisting: forwardRef(() => MsToggle),
|
|
1099
1100
|
multi: true
|
|
1100
1101
|
}
|
|
1101
|
-
], usesOnChanges: true, ngImport: i0, template: "<label class=\"ms-toggle\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" [class.invalid]=\"invalid\" [class.toggle-skeleton]=\"skeleton\">\n
|
|
1102
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"ms-toggle-container\">\n <label class=\"ms-toggle-label\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" [class.invalid]=\"invalid\" [class.toggle-skeleton]=\"skeleton\">\n @if(!skeleton){\n <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"toggle()\" (blur)=\"markTouched()\" />\n <span class=\"ms-toggle-track\"></span>\n @if (label) {\n <span class=\"ms-toggle-switch-label\">{{ label }}</span>\n }\n }@else{\n <div class=\"ms-radio-skeleton\"></div>\n }\n </label>\n</div>\n\n\n", styles: [".toggle-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-radio-skeleton{width:30px;height:18px;border-radius:50%;background:#e5e7eb;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-toggle-container{display:flex;align-items:center;margin:20px 0}.ms-toggle-label{position:relative;display:inline-block;cursor:pointer;font-size:14px;-webkit-user-select:none;user-select:none}.ms-toggle-label input{opacity:0;width:0;height:0}.ms-toggle-track{position:absolute;inset:2px 0 0;background-color:#1f242810;transition:.4s;border-radius:34px}.ms-toggle-track:before{position:absolute;content:\"\";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%;box-shadow:#63636333 0 0 3px 1px}input:checked+.ms-toggle-track{background-color:#0084ff}input:checked+.ms-toggle-track:before{transform:translate(20px)}.ms-toggle-sm .ms-toggle-switch-label{margin-left:28px;color:#1b1f22}.ms-toggle-lg .ms-toggle-switch-label{margin-left:40px;color:#1b1f22}.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle-sm .ms-toggle-track:before{height:12px;width:12px;left:2px;bottom:2px}.ms-toggle-sm input:checked+.ms-toggle-track:before{transform:translate(11px)}.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle-lg .ms-toggle-track:before{height:16px;width:16px;left:2px;bottom:2px}.ms-toggle-lg input:checked+.ms-toggle-track:before{transform:translate(16px)}.ms-toggle-lg .ms-toggle-switch-label{font-size:16px}.ms-toggle-label:hover .ms-toggle-track{background:#1f242815}.ms-toggle-label input:checked+.ms-toggle-track:hover{background:#006fd6}.ms-toggle-label input:focus+.ms-toggle-track{box-shadow:0 0 0 2px #0084ff4d;outline:1px solid #0084FF}.ms-toggle-label input:disabled+.ms-toggle-track{background-color:#e0e0e0;cursor:not-allowed}.ms-toggle-label input:disabled+.ms-toggle-track:before{background-color:#f5f5f5}.ms-toggle-label input:checked:disabled+.ms-toggle-track{background:#0084ff10}.ms-toggle-label input:disabled+.ms-toggle-track{background:#e0e0e0}.ms-toggle-label input:disabled~.ms-toggle-switch-label{color:#ccc;cursor:not-allowed}\n"] });
|
|
1102
1103
|
}
|
|
1103
1104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsToggle, decorators: [{
|
|
1104
1105
|
type: Component,
|
|
@@ -1113,7 +1114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1113
1114
|
useExisting: forwardRef(() => MsToggle),
|
|
1114
1115
|
multi: true
|
|
1115
1116
|
}
|
|
1116
|
-
], template: "<label class=\"ms-toggle\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" [class.invalid]=\"invalid\" [class.toggle-skeleton]=\"skeleton\">\n
|
|
1117
|
+
], template: "<div class=\"ms-toggle-container\">\n <label class=\"ms-toggle-label\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" [class.invalid]=\"invalid\" [class.toggle-skeleton]=\"skeleton\">\n @if(!skeleton){\n <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"toggle()\" (blur)=\"markTouched()\" />\n <span class=\"ms-toggle-track\"></span>\n @if (label) {\n <span class=\"ms-toggle-switch-label\">{{ label }}</span>\n }\n }@else{\n <div class=\"ms-radio-skeleton\"></div>\n }\n </label>\n</div>\n\n\n", styles: [".toggle-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-radio-skeleton{width:30px;height:18px;border-radius:50%;background:#e5e7eb;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-toggle-container{display:flex;align-items:center;margin:20px 0}.ms-toggle-label{position:relative;display:inline-block;cursor:pointer;font-size:14px;-webkit-user-select:none;user-select:none}.ms-toggle-label input{opacity:0;width:0;height:0}.ms-toggle-track{position:absolute;inset:2px 0 0;background-color:#1f242810;transition:.4s;border-radius:34px}.ms-toggle-track:before{position:absolute;content:\"\";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%;box-shadow:#63636333 0 0 3px 1px}input:checked+.ms-toggle-track{background-color:#0084ff}input:checked+.ms-toggle-track:before{transform:translate(20px)}.ms-toggle-sm .ms-toggle-switch-label{margin-left:28px;color:#1b1f22}.ms-toggle-lg .ms-toggle-switch-label{margin-left:40px;color:#1b1f22}.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle-sm .ms-toggle-track:before{height:12px;width:12px;left:2px;bottom:2px}.ms-toggle-sm input:checked+.ms-toggle-track:before{transform:translate(11px)}.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle-lg .ms-toggle-track:before{height:16px;width:16px;left:2px;bottom:2px}.ms-toggle-lg input:checked+.ms-toggle-track:before{transform:translate(16px)}.ms-toggle-lg .ms-toggle-switch-label{font-size:16px}.ms-toggle-label:hover .ms-toggle-track{background:#1f242815}.ms-toggle-label input:checked+.ms-toggle-track:hover{background:#006fd6}.ms-toggle-label input:focus+.ms-toggle-track{box-shadow:0 0 0 2px #0084ff4d;outline:1px solid #0084FF}.ms-toggle-label input:disabled+.ms-toggle-track{background-color:#e0e0e0;cursor:not-allowed}.ms-toggle-label input:disabled+.ms-toggle-track:before{background-color:#f5f5f5}.ms-toggle-label input:checked:disabled+.ms-toggle-track{background:#0084ff10}.ms-toggle-label input:disabled+.ms-toggle-track{background:#e0e0e0}.ms-toggle-label input:disabled~.ms-toggle-switch-label{color:#ccc;cursor:not-allowed}\n"] }]
|
|
1117
1118
|
}], propDecorators: { label: [{
|
|
1118
1119
|
type: Input
|
|
1119
1120
|
}], class: [{
|
|
@@ -1306,8 +1307,6 @@ class MsInlineEdit {
|
|
|
1306
1307
|
this.value = this.editingValue.trim();
|
|
1307
1308
|
this.isSuccess.set(true);
|
|
1308
1309
|
this.hasError.set(false);
|
|
1309
|
-
this.change.emit(this.value);
|
|
1310
|
-
this.saved.emit(this.value);
|
|
1311
1310
|
// Exit edit mode after short delay to show success state
|
|
1312
1311
|
setTimeout(() => {
|
|
1313
1312
|
this.isEditing.set(false);
|
|
@@ -1400,11 +1399,11 @@ class MsInlineEdit {
|
|
|
1400
1399
|
return this.value || this.placeholder;
|
|
1401
1400
|
}
|
|
1402
1401
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsInlineEdit, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1403
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsInlineEdit, isStandalone: true, selector: "app-ms-inline-edit", inputs: { value: "value", placeholder: "placeholder", fieldType: "fieldType", disabled: "disabled", required: "required", readonly: "readonly", pattern: "pattern", minlength: "minlength", maxlength: "maxlength", state: "state" }, outputs: { change: "change", saved: "saved", cancelled: "cancelled" }, ngImport: i0, template: "<div class=\"ms-inline-edit-container\" \n [class.ms-editing]=\"isEditing()\"\n [class.ms-has-error]=\"hasError()\"\n [class.ms-has-success]=\"isSuccess()\"\n [class.ms-disabled]=\"disabled\"\n [class.ms-focus]=\"isFocused()\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onBlur()\"\n [ngClass]=\"state\">\n\n <!-- Display Mode -->\n <div class=\"ms-inline-edit-display\" \n *ngIf=\"!isEditing()\"\n [class.ms-hover]=\"state === 'ms-hover'\"\n [class.ms-disabled]=\"disabled\">\n \n <!-- Disabled Input Field (when disabled) -->\n <input \n *ngIf=\"disabled\"\n type=\"text\"\n class=\"ms-inline-edit-display-input ms-form-control\"\n [value]=\"getDisplayText()\"\n [placeholder]=\"placeholder\"\n disabled\n readonly />\n\n <!-- Display Text (when not disabled) -->\n <span \n *ngIf=\"!disabled\"\n class=\"ms-inline-edit-text\" \n [class.ms-placeholder]=\"!value\">\n {{ getDisplayText() }}\n </span>\n\n <!-- Edit Icon Button -->\n <button \n type=\"button\"\n class=\"ms-inline-edit-btn\"\n (click)=\"enableEdit()\"\n aria-label=\"Edit\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/pencil.svg'\" alt=\"Icon\">\n </span>\n </button>\n </div>\n\n <!-- Edit Mode -->\n <div class=\"ms-inline-edit-form\" *ngIf=\"isEditing()\">\n \n <!-- Input Field -->\n <input\n type=\"text\"\n class=\"ms-inline-edit-input\"\n [class.ms-error]=\"hasError()\"\n [value]=\"editingValue\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [attr.minlength]=\"minlength\"\n [attr.maxlength]=\"maxlength\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <!-- Action Buttons -->\n <!-- <div class=\"ms-inline-edit-actions\">\n <button \n type=\"button\"\n class=\"ms-inline-edit-save\"\n [disabled]=\"hasError()\"\n (click)=\"saveValue()\"\n aria-label=\"Save\">\n <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/check.json'\"></span>\n </button>\n <button \n type=\"button\"\n class=\"ms-inline-edit-cancel\"\n (click)=\"cancelEdit()\"\n aria-label=\"Cancel\">\n <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/close.json'\"></span>\n </button>\n </div> -->\n\n <!-- Error Message -->\n <div class=\"ms-inline-edit-error\" *ngIf=\"hasError()\">\n <span *ngIf=\"required && !editingValue.trim()\">This field is required</span>\n <span *ngIf=\"minlength && editingValue.length < minlength\">Minimum {{ minlength }} characters required</span>\n <span *ngIf=\"maxlength && editingValue.length > maxlength\">Maximum {{ maxlength }} characters allowed</span>\n <span *ngIf=\"fieldType === 'email'\">Invalid email format</span>\n <span *ngIf=\"fieldType === 'number'\">Must be a valid number</span>\n </div>\n </div>\n\n</div>", styles: [".ms-inline-edit-container{display:inline-block;width:100%;font-family:inherit}.ms-inline-edit-container .ms-inline-edit-display{position:relative}.ms-inline-edit-container .ms-inline-edit-display:hover:not(.ms-disabled){border-color:var(--semantics-border-neutral-hover, #999999);background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display.ms-hover:not(.ms-disabled){border-color:var(--semantics-border-brand-default, #0084FF);background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-inline-edit-container .ms-inline-edit-display.ms-disabled{opacity:.6;cursor:not-allowed;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);border-color:var(--semantics-border-neutral-default, #E0E0E0);cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text{flex:1;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);word-break:break-word}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text.ms-placeholder{color:var(--semantic-fg-neutral-placeholder, #999999);font-style:italic}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn{flex-shrink:0;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;cursor:pointer;color:var(--semantic-fg-neutral-default, #666666);opacity:0;visibility:hidden;transition:all .2s ease;position:absolute;top:8px;bottom:0;right:12px;display:flex;align-items:center}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn:hover{color:var(--semantics-border-brand-default, #0084FF);transform:scale(1.1)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span ::ng-deep svg{width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display:hover .ms-inline-edit-btn{opacity:1;visibility:visible}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn{opacity:.7;visibility:visible;color:var(--semantics-border-brand-default, #0084FF);cursor:pointer}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn:hover{opacity:1}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{width:-webkit-fill-available;padding:.5rem .75rem;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;background-color:#fff;font-family:inherit;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);transition:all .2s ease;resize:vertical}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:focus,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea:focus{outline:none;border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea.ms-error{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error:focus,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea.ms-error:focus{border-color:var(--semantic-fg-error-default, #D33C3C);box-shadow:0 0 0 2px #d33c3c26}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input::placeholder,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:disabled,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);cursor:not-allowed;opacity:.6}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{min-height:4rem;resize:both}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions{display:flex;gap:.5rem;margin-top:.25rem}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:#fff;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;cursor:pointer;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:hover:not(:disabled){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border-color:var(--semantics-border-brand-default, #0084FF);color:var(--semantics-border-brand-default, #0084FF)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:disabled{opacity:.5;cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span ::ng-deep svg{width:60%;height:60%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save{background-color:var(--semantic-fg-success-default, #00935C);border-color:var(--semantic-fg-success-default, #00935C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:hover:not(:disabled){background-color:var(--semantic-fg-success-hover, #007A4A);border-color:var(--semantic-fg-success-hover, #007A4A)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:disabled{background-color:var(--semantic-fg-neutral-default, #CCCCCC);border-color:var(--semantic-fg-neutral-default, #CCCCCC);opacity:.5}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel{background-color:var(--semantic-fg-error-default, #D33C3C);border-color:var(--semantic-fg-error-default, #D33C3C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel:hover:not(:disabled){background-color:var(--semantic-fg-error-hover, #B91C1C);border-color:var(--semantic-fg-error-hover, #B91C1C)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error{padding:.5rem .75rem;background-color:#d33c3c1a;border-left:3px solid var(--semantic-fg-error-default, #D33C3C);border-radius:2px;font-size:.75rem;color:var(--semantic-fg-error-default, #D33C3C);font-weight:500;animation:slideIn .2s ease}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span{display:block}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span:not(:last-child){margin-bottom:.25rem}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display{border-color:var(--semantic-fg-error-default, #D33C3C)!important;background-color:#d33c3c05!important}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display .ms-inline-edit-text{color:var(--semantic-fg-error-default, #D33C3C)}.ms-inline-edit-container.ms-has-success .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important}.ms-inline-edit-container.ms-focus .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display{opacity:1;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}@keyframes slideIn{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
1402
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsInlineEdit, isStandalone: true, selector: "app-ms-inline-edit", inputs: { value: "value", placeholder: "placeholder", fieldType: "fieldType", disabled: "disabled", required: "required", readonly: "readonly", pattern: "pattern", minlength: "minlength", maxlength: "maxlength", state: "state" }, outputs: { change: "change", saved: "saved", cancelled: "cancelled" }, ngImport: i0, template: "<div class=\"ms-inline-edit-container\" \n [class.ms-editing]=\"isEditing()\"\n [class.ms-has-error]=\"hasError()\"\n [class.ms-has-success]=\"isSuccess()\"\n [class.ms-disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onBlur()\"\n [ngClass]=\"state\">\n\n <!-- Display Mode -->\n <div class=\"ms-inline-edit-display\" \n *ngIf=\"!isEditing()\"\n [class.ms-hover]=\"state === 'ms-hover'\"\n [class.ms-disabled]=\"disabled\">\n \n <!-- Disabled Input Field (when disabled) -->\n <input \n *ngIf=\"disabled\"\n type=\"text\"\n class=\"ms-inline-edit-display-input ms-form-control\"\n [value]=\"getDisplayText()\"\n [placeholder]=\"placeholder\"\n disabled\n readonly />\n\n <!-- Display Text (when not disabled) -->\n <span \n *ngIf=\"!disabled\"\n class=\"ms-inline-edit-text\" \n [class.ms-placeholder]=\"!value\">\n {{ getDisplayText() }}\n </span>\n\n <!-- Edit Icon Button -->\n <button \n type=\"button\"\n class=\"ms-inline-edit-btn\"\n (click)=\"enableEdit()\"\n aria-label=\"Edit\">\n <!-- <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/pencil.svg'\"></span> -->\n <ms-icon [name]=\"'edit'\" [color]=\"'ms-icon-black'\" [size]=\"'small'\"></ms-icon>\n </button>\n </div>\n\n <!-- Edit Mode -->\n <div class=\"ms-inline-edit-form\" *ngIf=\"isEditing()\">\n \n <!-- Input Field -->\n <input\n type=\"text\"\n class=\"ms-inline-edit-input\"\n [class.ms-error]=\"hasError()\"\n [value]=\"editingValue\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [attr.minlength]=\"minlength\"\n [attr.maxlength]=\"maxlength\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <!-- Action Buttons -->\n <!-- <div class=\"ms-inline-edit-actions\">\n <button \n type=\"button\"\n class=\"ms-inline-edit-save\"\n [disabled]=\"hasError()\"\n (click)=\"saveValue()\"\n aria-label=\"Save\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/check.json'\"></span>\n </button>\n <button \n type=\"button\"\n class=\"ms-inline-edit-cancel\"\n (click)=\"cancelEdit()\"\n aria-label=\"Cancel\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/close.json'\"></span>\n </button>\n </div> -->\n\n <!-- Error Message -->\n <div class=\"ms-inline-edit-error\" *ngIf=\"hasError()\">\n <span *ngIf=\"required && !editingValue.trim()\">This field is required</span>\n <span *ngIf=\"minlength && editingValue.length < minlength\">Minimum {{ minlength }} characters required</span>\n <span *ngIf=\"maxlength && editingValue.length > maxlength\">Maximum {{ maxlength }} characters allowed</span>\n <span *ngIf=\"fieldType === 'email'\">Invalid email format</span>\n <span *ngIf=\"fieldType === 'number'\">Must be a valid number</span>\n </div>\n </div>\n\n</div>", styles: [".ms-inline-edit-container{display:inline-block;width:100%;font-family:inherit}.ms-inline-edit-container .ms-inline-edit-display{position:relative}.ms-inline-edit-container .ms-inline-edit-display:hover:not(.ms-disabled){border-color:var(--semantics-border-neutral-hover, #999999);background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display.ms-hover:not(.ms-disabled){border-color:var(--semantics-border-brand-default, #0084FF);background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-inline-edit-container .ms-inline-edit-display.ms-disabled{opacity:.6;cursor:not-allowed;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);border-color:var(--semantics-border-neutral-default, #E0E0E0);cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text{flex:1;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);word-break:break-word}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text.ms-placeholder{color:var(--semantic-fg-neutral-placeholder, #999999);font-style:italic}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn{flex-shrink:0;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;cursor:pointer;color:var(--semantic-fg-neutral-default, #666666);opacity:0;visibility:hidden;transition:all .2s ease;position:absolute;top:8px;bottom:0;right:12px;display:flex;align-items:center}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn:hover{color:var(--semantics-border-brand-default, #0084FF);transform:scale(1.1)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span ::ng-deep svg{width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display:hover .ms-inline-edit-btn{opacity:1;visibility:visible}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn{opacity:.7;visibility:visible;color:var(--semantics-border-brand-default, #0084FF);cursor:pointer}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn:hover{opacity:1}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input{width:-webkit-fill-available;padding:.5rem .75rem;border:1px solid #CCCCCC;border-radius:8px;background-color:#fff;font-family:inherit;font-size:.875rem;color:#333;transition:all .2s ease;resize:vertical}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:hover{border-color:var(--semantics-border-brand-default, #0084FF)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:focus{outline:none;border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error:focus{border-color:var(--semantic-fg-error-default, #D33C3C);box-shadow:0 0 0 2px #d33c3c26}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);cursor:not-allowed;opacity:.6}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{min-height:4rem;resize:both}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions{display:flex;gap:.5rem;margin-top:.25rem}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:#fff;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;cursor:pointer;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:hover:not(:disabled){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border-color:var(--semantics-border-brand-default, #0084FF);color:var(--semantics-border-brand-default, #0084FF)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:disabled{opacity:.5;cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span ::ng-deep svg{width:60%;height:60%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save{background-color:var(--semantic-fg-success-default, #00935C);border-color:var(--semantic-fg-success-default, #00935C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:hover:not(:disabled){background-color:var(--semantic-fg-success-hover, #007A4A);border-color:var(--semantic-fg-success-hover, #007A4A)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:disabled{background-color:var(--semantic-fg-neutral-default, #CCCCCC);border-color:var(--semantic-fg-neutral-default, #CCCCCC);opacity:.5}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel{background-color:var(--semantic-fg-error-default, #D33C3C);border-color:var(--semantic-fg-error-default, #D33C3C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel:hover:not(:disabled){background-color:var(--semantic-fg-error-hover, #B91C1C);border-color:var(--semantic-fg-error-hover, #B91C1C)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error{padding:.5rem .75rem;background-color:#d33c3c1a;border-left:3px solid var(--semantic-fg-error-default, #D33C3C);border-radius:2px;font-size:.75rem;color:var(--semantic-fg-error-default, #D33C3C);font-weight:500;animation:slideIn .2s ease}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span{display:block}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span:not(:last-child){margin-bottom:.25rem}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display{border-color:var(--semantic-fg-error-default, #D33C3C)!important;background-color:#d33c3c05!important}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display .ms-inline-edit-text{color:var(--semantic-fg-error-default, #D33C3C)}.ms-inline-edit-container.ms-has-success .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important}.ms-inline-edit-container.ms-focus .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display{opacity:1;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}@keyframes slideIn{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.ms-form-control{padding:.6rem .8rem;border:1px solid #E0E0E0;border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
1404
1403
|
}
|
|
1405
1404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsInlineEdit, decorators: [{
|
|
1406
1405
|
type: Component,
|
|
1407
|
-
args: [{ selector: 'app-ms-inline-edit', imports: [CommonModule, FormsModule, InlineSVGModule, ReactiveFormsModule], template: "<div class=\"ms-inline-edit-container\" \n [class.ms-editing]=\"isEditing()\"\n [class.ms-has-error]=\"hasError()\"\n [class.ms-has-success]=\"isSuccess()\"\n [class.ms-disabled]=\"disabled\"\n [class.ms-focus]=\"isFocused()\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onBlur()\"\n [ngClass]=\"state\">\n\n <!-- Display Mode -->\n <div class=\"ms-inline-edit-display\" \n *ngIf=\"!isEditing()\"\n [class.ms-hover]=\"state === 'ms-hover'\"\n [class.ms-disabled]=\"disabled\">\n \n <!-- Disabled Input Field (when disabled) -->\n <input \n *ngIf=\"disabled\"\n type=\"text\"\n class=\"ms-inline-edit-display-input ms-form-control\"\n [value]=\"getDisplayText()\"\n [placeholder]=\"placeholder\"\n disabled\n readonly />\n\n <!-- Display Text (when not disabled) -->\n <span \n *ngIf=\"!disabled\"\n class=\"ms-inline-edit-text\" \n [class.ms-placeholder]=\"!value\">\n {{ getDisplayText() }}\n </span>\n\n <!-- Edit Icon Button -->\n <button \n type=\"button\"\n class=\"ms-inline-edit-btn\"\n (click)=\"enableEdit()\"\n aria-label=\"Edit\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/pencil.svg'\" alt=\"Icon\">\n </span>\n </button>\n </div>\n\n <!-- Edit Mode -->\n <div class=\"ms-inline-edit-form\" *ngIf=\"isEditing()\">\n \n <!-- Input Field -->\n <input\n type=\"text\"\n class=\"ms-inline-edit-input\"\n [class.ms-error]=\"hasError()\"\n [value]=\"editingValue\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [attr.minlength]=\"minlength\"\n [attr.maxlength]=\"maxlength\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <!-- Action Buttons -->\n <!-- <div class=\"ms-inline-edit-actions\">\n <button \n type=\"button\"\n class=\"ms-inline-edit-save\"\n [disabled]=\"hasError()\"\n (click)=\"saveValue()\"\n aria-label=\"Save\">\n <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/check.json'\"></span>\n </button>\n <button \n type=\"button\"\n class=\"ms-inline-edit-cancel\"\n (click)=\"cancelEdit()\"\n aria-label=\"Cancel\">\n <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/close.json'\"></span>\n </button>\n </div> -->\n\n <!-- Error Message -->\n <div class=\"ms-inline-edit-error\" *ngIf=\"hasError()\">\n <span *ngIf=\"required && !editingValue.trim()\">This field is required</span>\n <span *ngIf=\"minlength && editingValue.length < minlength\">Minimum {{ minlength }} characters required</span>\n <span *ngIf=\"maxlength && editingValue.length > maxlength\">Maximum {{ maxlength }} characters allowed</span>\n <span *ngIf=\"fieldType === 'email'\">Invalid email format</span>\n <span *ngIf=\"fieldType === 'number'\">Must be a valid number</span>\n </div>\n </div>\n\n</div>", styles: [".ms-inline-edit-container{display:inline-block;width:100%;font-family:inherit}.ms-inline-edit-container .ms-inline-edit-display{position:relative}.ms-inline-edit-container .ms-inline-edit-display:hover:not(.ms-disabled){border-color:var(--semantics-border-neutral-hover, #999999);background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display.ms-hover:not(.ms-disabled){border-color:var(--semantics-border-brand-default, #0084FF);background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-inline-edit-container .ms-inline-edit-display.ms-disabled{opacity:.6;cursor:not-allowed;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);border-color:var(--semantics-border-neutral-default, #E0E0E0);cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text{flex:1;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);word-break:break-word}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text.ms-placeholder{color:var(--semantic-fg-neutral-placeholder, #999999);font-style:italic}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn{flex-shrink:0;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;cursor:pointer;color:var(--semantic-fg-neutral-default, #666666);opacity:0;visibility:hidden;transition:all .2s ease;position:absolute;top:8px;bottom:0;right:12px;display:flex;align-items:center}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn:hover{color:var(--semantics-border-brand-default, #0084FF);transform:scale(1.1)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span ::ng-deep svg{width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display:hover .ms-inline-edit-btn{opacity:1;visibility:visible}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn{opacity:.7;visibility:visible;color:var(--semantics-border-brand-default, #0084FF);cursor:pointer}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn:hover{opacity:1}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{width:-webkit-fill-available;padding:.5rem .75rem;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;background-color:#fff;font-family:inherit;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);transition:all .2s ease;resize:vertical}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:focus,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea:focus{outline:none;border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea.ms-error{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error:focus,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea.ms-error:focus{border-color:var(--semantic-fg-error-default, #D33C3C);box-shadow:0 0 0 2px #d33c3c26}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input::placeholder,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:disabled,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);cursor:not-allowed;opacity:.6}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{min-height:4rem;resize:both}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions{display:flex;gap:.5rem;margin-top:.25rem}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:#fff;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;cursor:pointer;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:hover:not(:disabled){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border-color:var(--semantics-border-brand-default, #0084FF);color:var(--semantics-border-brand-default, #0084FF)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:disabled{opacity:.5;cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span ::ng-deep svg{width:60%;height:60%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save{background-color:var(--semantic-fg-success-default, #00935C);border-color:var(--semantic-fg-success-default, #00935C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:hover:not(:disabled){background-color:var(--semantic-fg-success-hover, #007A4A);border-color:var(--semantic-fg-success-hover, #007A4A)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:disabled{background-color:var(--semantic-fg-neutral-default, #CCCCCC);border-color:var(--semantic-fg-neutral-default, #CCCCCC);opacity:.5}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel{background-color:var(--semantic-fg-error-default, #D33C3C);border-color:var(--semantic-fg-error-default, #D33C3C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel:hover:not(:disabled){background-color:var(--semantic-fg-error-hover, #B91C1C);border-color:var(--semantic-fg-error-hover, #B91C1C)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error{padding:.5rem .75rem;background-color:#d33c3c1a;border-left:3px solid var(--semantic-fg-error-default, #D33C3C);border-radius:2px;font-size:.75rem;color:var(--semantic-fg-error-default, #D33C3C);font-weight:500;animation:slideIn .2s ease}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span{display:block}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span:not(:last-child){margin-bottom:.25rem}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display{border-color:var(--semantic-fg-error-default, #D33C3C)!important;background-color:#d33c3c05!important}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display .ms-inline-edit-text{color:var(--semantic-fg-error-default, #D33C3C)}.ms-inline-edit-container.ms-has-success .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important}.ms-inline-edit-container.ms-focus .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display{opacity:1;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}@keyframes slideIn{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
1406
|
+
args: [{ selector: 'app-ms-inline-edit', imports: [CommonModule, FormsModule, InlineSVGModule, ReactiveFormsModule, MsIcon], template: "<div class=\"ms-inline-edit-container\" \n [class.ms-editing]=\"isEditing()\"\n [class.ms-has-error]=\"hasError()\"\n [class.ms-has-success]=\"isSuccess()\"\n [class.ms-disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onBlur()\"\n [ngClass]=\"state\">\n\n <!-- Display Mode -->\n <div class=\"ms-inline-edit-display\" \n *ngIf=\"!isEditing()\"\n [class.ms-hover]=\"state === 'ms-hover'\"\n [class.ms-disabled]=\"disabled\">\n \n <!-- Disabled Input Field (when disabled) -->\n <input \n *ngIf=\"disabled\"\n type=\"text\"\n class=\"ms-inline-edit-display-input ms-form-control\"\n [value]=\"getDisplayText()\"\n [placeholder]=\"placeholder\"\n disabled\n readonly />\n\n <!-- Display Text (when not disabled) -->\n <span \n *ngIf=\"!disabled\"\n class=\"ms-inline-edit-text\" \n [class.ms-placeholder]=\"!value\">\n {{ getDisplayText() }}\n </span>\n\n <!-- Edit Icon Button -->\n <button \n type=\"button\"\n class=\"ms-inline-edit-btn\"\n (click)=\"enableEdit()\"\n aria-label=\"Edit\">\n <!-- <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/pencil.svg'\"></span> -->\n <ms-icon [name]=\"'edit'\" [color]=\"'ms-icon-black'\" [size]=\"'small'\"></ms-icon>\n </button>\n </div>\n\n <!-- Edit Mode -->\n <div class=\"ms-inline-edit-form\" *ngIf=\"isEditing()\">\n \n <!-- Input Field -->\n <input\n type=\"text\"\n class=\"ms-inline-edit-input\"\n [class.ms-error]=\"hasError()\"\n [value]=\"editingValue\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [attr.minlength]=\"minlength\"\n [attr.maxlength]=\"maxlength\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <!-- Action Buttons -->\n <!-- <div class=\"ms-inline-edit-actions\">\n <button \n type=\"button\"\n class=\"ms-inline-edit-save\"\n [disabled]=\"hasError()\"\n (click)=\"saveValue()\"\n aria-label=\"Save\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/check.json'\"></span>\n </button>\n <button \n type=\"button\"\n class=\"ms-inline-edit-cancel\"\n (click)=\"cancelEdit()\"\n aria-label=\"Cancel\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/close.json'\"></span>\n </button>\n </div> -->\n\n <!-- Error Message -->\n <div class=\"ms-inline-edit-error\" *ngIf=\"hasError()\">\n <span *ngIf=\"required && !editingValue.trim()\">This field is required</span>\n <span *ngIf=\"minlength && editingValue.length < minlength\">Minimum {{ minlength }} characters required</span>\n <span *ngIf=\"maxlength && editingValue.length > maxlength\">Maximum {{ maxlength }} characters allowed</span>\n <span *ngIf=\"fieldType === 'email'\">Invalid email format</span>\n <span *ngIf=\"fieldType === 'number'\">Must be a valid number</span>\n </div>\n </div>\n\n</div>", styles: [".ms-inline-edit-container{display:inline-block;width:100%;font-family:inherit}.ms-inline-edit-container .ms-inline-edit-display{position:relative}.ms-inline-edit-container .ms-inline-edit-display:hover:not(.ms-disabled){border-color:var(--semantics-border-neutral-hover, #999999);background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display.ms-hover:not(.ms-disabled){border-color:var(--semantics-border-brand-default, #0084FF);background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-inline-edit-container .ms-inline-edit-display.ms-disabled{opacity:.6;cursor:not-allowed;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);border-color:var(--semantics-border-neutral-default, #E0E0E0);cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text{flex:1;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);word-break:break-word}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text.ms-placeholder{color:var(--semantic-fg-neutral-placeholder, #999999);font-style:italic}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn{flex-shrink:0;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;cursor:pointer;color:var(--semantic-fg-neutral-default, #666666);opacity:0;visibility:hidden;transition:all .2s ease;position:absolute;top:8px;bottom:0;right:12px;display:flex;align-items:center}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn:hover{color:var(--semantics-border-brand-default, #0084FF);transform:scale(1.1)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span ::ng-deep svg{width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display:hover .ms-inline-edit-btn{opacity:1;visibility:visible}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn{opacity:.7;visibility:visible;color:var(--semantics-border-brand-default, #0084FF);cursor:pointer}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn:hover{opacity:1}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input{width:-webkit-fill-available;padding:.5rem .75rem;border:1px solid #CCCCCC;border-radius:8px;background-color:#fff;font-family:inherit;font-size:.875rem;color:#333;transition:all .2s ease;resize:vertical}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:hover{border-color:var(--semantics-border-brand-default, #0084FF)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:focus{outline:none;border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error:focus{border-color:var(--semantic-fg-error-default, #D33C3C);box-shadow:0 0 0 2px #d33c3c26}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);cursor:not-allowed;opacity:.6}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{min-height:4rem;resize:both}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions{display:flex;gap:.5rem;margin-top:.25rem}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:#fff;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;cursor:pointer;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:hover:not(:disabled){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border-color:var(--semantics-border-brand-default, #0084FF);color:var(--semantics-border-brand-default, #0084FF)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:disabled{opacity:.5;cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span ::ng-deep svg{width:60%;height:60%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save{background-color:var(--semantic-fg-success-default, #00935C);border-color:var(--semantic-fg-success-default, #00935C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:hover:not(:disabled){background-color:var(--semantic-fg-success-hover, #007A4A);border-color:var(--semantic-fg-success-hover, #007A4A)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:disabled{background-color:var(--semantic-fg-neutral-default, #CCCCCC);border-color:var(--semantic-fg-neutral-default, #CCCCCC);opacity:.5}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel{background-color:var(--semantic-fg-error-default, #D33C3C);border-color:var(--semantic-fg-error-default, #D33C3C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel:hover:not(:disabled){background-color:var(--semantic-fg-error-hover, #B91C1C);border-color:var(--semantic-fg-error-hover, #B91C1C)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error{padding:.5rem .75rem;background-color:#d33c3c1a;border-left:3px solid var(--semantic-fg-error-default, #D33C3C);border-radius:2px;font-size:.75rem;color:var(--semantic-fg-error-default, #D33C3C);font-weight:500;animation:slideIn .2s ease}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span{display:block}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span:not(:last-child){margin-bottom:.25rem}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display{border-color:var(--semantic-fg-error-default, #D33C3C)!important;background-color:#d33c3c05!important}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display .ms-inline-edit-text{color:var(--semantic-fg-error-default, #D33C3C)}.ms-inline-edit-container.ms-has-success .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important}.ms-inline-edit-container.ms-focus .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display{opacity:1;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}@keyframes slideIn{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.ms-form-control{padding:.6rem .8rem;border:1px solid #E0E0E0;border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}\n"] }]
|
|
1408
1407
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
1409
1408
|
type: Input
|
|
1410
1409
|
}], placeholder: [{
|
|
@@ -1827,11 +1826,11 @@ class MsPhoneInput {
|
|
|
1827
1826
|
this.isChildFocused = true;
|
|
1828
1827
|
}
|
|
1829
1828
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPhoneInput, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPhoneInput, isStandalone: true, selector: "app-ms-phone-input", inputs: { id: "id", name: "name", placeholder: "placeholder", state: "state", readonly: "readonly", disabled: "disabled", required: "required", skeleton: "skeleton", invalid: "invalid", pattern: "pattern", value: "value", countryList: "countryList", selectedCountry: "selectedCountry" }, outputs: { change: "change", focus: "focus", blur: "blur", keydown: "keydown", keyup: "keyup", countryChange: "countryChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Phone Number Input with Country Selector -->\n<div class=\"ms-phone-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n <div class=\"ms-phone-input-group ms-common-hover ms-d-flex\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.ms-focus]=\"isChildFocused || state === 'ms-focus'\">\n \n <!-- Country Selector Dropdown (Left Side) -->\n <div class=\"phone-country-selector-wrapper\">\n <!-- Selector Button -->\n <button\n type=\"button\"\n class=\"country-selector-button\"\n [class.disabled]=\"disabled\"\n [class.active]=\"isDropdownOpen\"\n (click)=\"toggleDropdown()\"\n [disabled]=\"disabled\">\n \n <!-- Selected Country Flag -->\n <!-- <img\n *ngIf=\"selectedCountry?.countryCode\"\n [src]=\"getCountryFlagPath(selectedCountry)\"\n [alt]=\"selectedCountry?.label\"\n class=\"country-flag\" /> -->\n <ms-flag-icon *ngIf=\"selectedCountry?.countryCode\" class=\"country-flag\" [size]=\"'small'\" [name]=\"selectedCountry?.label | lowercase\"></ms-flag-icon>\n \n <!-- Country Code -->\n <span class=\"country-code\">{{ selectedCountry?.dialCode || 'US' }}</span>\n \n <!-- Chevron Icon -->\n <span class=\"chevron-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/chevron-down.svg'\"></span>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"country-dropdown\" *ngIf=\"isDropdownOpen\">\n <!-- Search Input -->\n <div class=\"ms-position-relative phone-input-search\">\n <input\n type=\"text\"\n class=\"country-search\"\n placeholder=\"Search country...\"\n [value]=\"searchTerm\"\n (input)=\"onSearch($event)\" />\n <!-- <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span> -->\n <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n </div>\n \n\n <!-- Countries List -->\n <div class=\"countries-list\">\n <button\n *ngFor=\"let country of filteredCountries\"\n type=\"button\"\n class=\"country-item\"\n [class.active]=\"selectedCountry?.countryCode === country.countryCode\"\n (click)=\"selectCountry(country)\">\n \n <!-- Flag -->\n <!-- <img\n [src]=\"getCountryFlagPath(country)\"\n [alt]=\"country.label\"\n class=\"country-flag-small\" /> -->\n <ms-flag-icon class=\"country-flag-small\" [size]=\"'small'\" [name]=\"country?.label | lowercase\"></ms-flag-icon>\n \n <!-- Country Label and Code -->\n <div class=\"country-info\">\n <span class=\"country-label\">{{ country.label }}</span>\n <!-- <span class=\"country-code-dial\">{{ country.countryCode }} \u2022 {{ country.dialCode }}</span> -->\n </div>\n </button>\n </div>\n\n <!-- No Results -->\n <div *ngIf=\"filteredCountries.length === 0\" class=\"no-results\">\n No countries found\n </div>\n </div>\n </div>\n\n <!-- Phone Number Input -->\n <input\n type=\"tel\"\n class=\"ms-phone-input-field\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [placeholder]=\"placeholder\"\n [attr.pattern]=\"pattern || '[0-9\\\\-\\\\(\\\\)\\\\+\\\\s]*'\"\n [attr.inputmode]=\"'numeric'\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event);onChildFocus()\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\" />\n </div>\n</div>\n", styles: [".ms-phone-input-container{display:flex;flex-direction:column;width:100%}.ms-phone-input-container .ms-phone-input-group{position:relative}.ms-phone-input-container .ms-phone-input-group .ms-phone-country-selector{flex-shrink:0;border-right:1px solid var(--semantics-border-neutral-default, #CCCCCC)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper{display:inline-block;flex-shrink:0;border-right:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button{display:flex;align-items:center;gap:.5rem;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px 0 0 4px;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333);font-size:.875rem;font-weight:400;white-space:nowrap}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.disabled{opacity:.5;cursor:not-allowed}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-code{font-weight:500!important;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon svg{width:100%;height:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.active .chevron-icon{transform:rotate(180deg)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown{position:absolute;left:0;right:0;background:#fff;border-radius:12px;z-index:1000;min-width:280px;max-height:400px;overflow-y:auto;margin-top:.5rem;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search{padding:.75rem;margin:12px;font-size:.875rem;outline:none;background:#fff;box-sizing:border-box;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;width:-webkit-fill-available;padding-left:40px;font-weight:400}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search:focus{background-color:#fff}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search::placeholder{color:#6a6b6d}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .countries-list{display:flex;flex-direction:column}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;color:#1b1f22;font-size:14px}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:last-child{border-bottom:none}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:hover:not(.active){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active .country-label{color:var(--semantics-border-brand-default, #0084FF);font-weight:600}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info{display:flex;flex-direction:column;gap:.125rem;flex:1;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-label{font-size:.875rem;font-weight:500;color:var(--semantic-fg-neutral-strong, #333333)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-code-dial{font-size:.75rem;color:var(--semantic-fg-neutral-default, #666666)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .no-results{padding:1rem;text-align:center;color:var(--semantic-fg-neutral-default, #666666);font-size:.875rem}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-group.ms-common-hover:has(.ms-phone-input-field):focus{border:1px solid #D33C3C}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field{flex:1;border:none;background:none;padding:8px;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);font-family:inherit;outline:none}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field:disabled{cursor:not-allowed;opacity:.6}.ms-phone-input-container.ms-has-error .ms-phone-input-group{border-color:var(--semantic-fg-error-default, #D33C3C)!important;box-shadow:0 0 0 1px #da3e3740!important}.ms-phone-input-container.ms-has-success:not(.ms-has-error) .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF)!important}.ms-phone-input-container.ms-focus .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus .phone-country-selector-wrapper,.ms-phone-input-container.ms-has-success .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-success .ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-error .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #D33C3C}.ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.phone-input-search .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i2$1.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsFlagIcon, selector: "ms-flag-icon", inputs: ["name", "size"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }] });
|
|
1829
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPhoneInput, isStandalone: true, selector: "app-ms-phone-input", inputs: { id: "id", name: "name", placeholder: "placeholder", state: "state", readonly: "readonly", disabled: "disabled", required: "required", skeleton: "skeleton", invalid: "invalid", pattern: "pattern", value: "value", countryList: "countryList", selectedCountry: "selectedCountry" }, outputs: { change: "change", focus: "focus", blur: "blur", keydown: "keydown", keyup: "keyup", countryChange: "countryChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Phone Number Input with Country Selector -->\n<div class=\"ms-phone-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n <div class=\"ms-phone-input-group ms-common-hover ms-d-flex\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.ms-focus]=\"isChildFocused || state === 'ms-focus'\">\n \n <!-- Country Selector Dropdown (Left Side) -->\n <div class=\"phone-country-selector-wrapper\">\n <!-- Selector Button -->\n <button\n type=\"button\"\n class=\"country-selector-button\"\n [class.disabled]=\"disabled\"\n [class.active]=\"isDropdownOpen\"\n (click)=\"toggleDropdown()\"\n [disabled]=\"disabled\">\n \n <!-- Selected Country Flag -->\n <!-- <img\n *ngIf=\"selectedCountry?.countryCode\"\n [src]=\"getCountryFlagPath(selectedCountry)\"\n [alt]=\"selectedCountry?.label\"\n class=\"country-flag\" /> -->\n <ms-flag-icon *ngIf=\"selectedCountry?.countryCode\" class=\"country-flag\" [size]=\"'small'\" [name]=\"selectedCountry?.label | lowercase\"></ms-flag-icon>\n \n <!-- Country Code -->\n <span class=\"country-code\">{{ selectedCountry?.dialCode || 'US' }}</span>\n \n <!-- Chevron Icon -->\n <!-- <span class=\"chevron-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/chevron-down.svg'\"></span> -->\n <ms-icon class=\"chevron-icon\" [name]=\"'chevron-down'\" [color]=\"'ms-icon-black'\" [size]=\"'small'\"></ms-icon>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"country-dropdown\" *ngIf=\"isDropdownOpen\">\n <!-- Search Input -->\n <div class=\"ms-position-relative phone-input-search\">\n <input\n type=\"text\"\n class=\"country-search\"\n placeholder=\"Search country...\"\n [value]=\"searchTerm\"\n (input)=\"onSearch($event)\" />\n <!-- <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span> -->\n <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n </div>\n \n\n <!-- Countries List -->\n <div class=\"countries-list\">\n <button\n *ngFor=\"let country of filteredCountries\"\n type=\"button\"\n class=\"country-item\"\n [class.active]=\"selectedCountry?.countryCode === country.countryCode\"\n (click)=\"selectCountry(country)\">\n \n <!-- Flag -->\n <!-- <img\n [src]=\"getCountryFlagPath(country)\"\n [alt]=\"country.label\"\n class=\"country-flag-small\" /> -->\n <ms-flag-icon class=\"country-flag-small\" [size]=\"'small'\" [name]=\"country?.label | lowercase\"></ms-flag-icon>\n \n <!-- Country Label and Code -->\n <div class=\"country-info\">\n <span class=\"country-label\">{{ country.label }}</span>\n <!-- <span class=\"country-code-dial\">{{ country.countryCode }} \u2022 {{ country.dialCode }}</span> -->\n </div>\n </button>\n </div>\n\n <!-- No Results -->\n <div *ngIf=\"filteredCountries.length === 0\" class=\"no-results\">\n No countries found\n </div>\n </div>\n </div>\n\n <!-- Phone Number Input -->\n <input\n type=\"tel\"\n class=\"ms-phone-input-field\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [placeholder]=\"placeholder\"\n [attr.pattern]=\"pattern || '[0-9\\\\-\\\\(\\\\)\\\\+\\\\s]*'\"\n [attr.inputmode]=\"'numeric'\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event);onChildFocus()\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\" />\n </div>\n</div>\n", styles: [".ms-phone-input-container{display:flex;flex-direction:column;width:100%}.ms-phone-input-container .ms-phone-input-group{position:relative}.ms-phone-input-container .ms-phone-input-group .ms-phone-country-selector{flex-shrink:0;border-right:1px solid var(--semantics-border-neutral-default, #CCCCCC)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper{display:inline-block;flex-shrink:0;border-right:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button{display:flex;align-items:center;gap:.5rem;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px 0 0 4px;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333);font-size:.875rem;font-weight:400;white-space:nowrap}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.disabled{opacity:.5;cursor:not-allowed}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-code{font-weight:500!important;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon svg{width:100%;height:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.active .chevron-icon{transform:rotate(180deg)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown{position:absolute;left:0;right:0;background:#fff;border-radius:12px;z-index:1000;min-width:280px;max-height:400px;overflow-y:auto;margin-top:.5rem;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search{padding:.75rem;margin:12px;font-size:.875rem;outline:none;background:#fff;box-sizing:border-box;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;width:-webkit-fill-available;padding-left:40px;font-weight:400}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search:focus{background-color:#fff}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search::placeholder{color:#6a6b6d}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .countries-list{display:flex;flex-direction:column}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;color:#1b1f22;font-size:14px}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:last-child{border-bottom:none}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:hover:not(.active){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active .country-label{color:var(--semantics-border-brand-default, #0084FF);font-weight:600}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info{display:flex;flex-direction:column;gap:.125rem;flex:1;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-label{font-size:.875rem;font-weight:500;color:var(--semantic-fg-neutral-strong, #333333)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-code-dial{font-size:.75rem;color:var(--semantic-fg-neutral-default, #666666)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .no-results{padding:1rem;text-align:center;color:var(--semantic-fg-neutral-default, #666666);font-size:.875rem}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-group.ms-common-hover:has(.ms-phone-input-field):focus{border:1px solid #D33C3C}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field{flex:1;border:none;background:none;padding:8px;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);font-family:inherit;outline:none}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field:disabled{cursor:not-allowed;opacity:.6}.ms-phone-input-container.ms-has-error .ms-phone-input-group{border-color:var(--semantic-fg-error-default, #D33C3C)!important;box-shadow:0 0 0 1px #da3e3740!important}.ms-phone-input-container.ms-has-success:not(.ms-has-error) .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF)!important}.ms-phone-input-container.ms-focus .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus .phone-country-selector-wrapper,.ms-phone-input-container.ms-has-success .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-success .ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-error .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #D33C3C}.ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.phone-input-search .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: MsFlagIcon, selector: "ms-flag-icon", inputs: ["name", "size"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }] });
|
|
1831
1830
|
}
|
|
1832
1831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPhoneInput, decorators: [{
|
|
1833
1832
|
type: Component,
|
|
1834
|
-
args: [{ selector: 'app-ms-phone-input', imports: [CommonModule, FormsModule, InlineSVGModule, MsFlagIcon, MsIcon], template: "<!-- Phone Number Input with Country Selector -->\n<div class=\"ms-phone-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n <div class=\"ms-phone-input-group ms-common-hover ms-d-flex\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.ms-focus]=\"isChildFocused || state === 'ms-focus'\">\n \n <!-- Country Selector Dropdown (Left Side) -->\n <div class=\"phone-country-selector-wrapper\">\n <!-- Selector Button -->\n <button\n type=\"button\"\n class=\"country-selector-button\"\n [class.disabled]=\"disabled\"\n [class.active]=\"isDropdownOpen\"\n (click)=\"toggleDropdown()\"\n [disabled]=\"disabled\">\n \n <!-- Selected Country Flag -->\n <!-- <img\n *ngIf=\"selectedCountry?.countryCode\"\n [src]=\"getCountryFlagPath(selectedCountry)\"\n [alt]=\"selectedCountry?.label\"\n class=\"country-flag\" /> -->\n <ms-flag-icon *ngIf=\"selectedCountry?.countryCode\" class=\"country-flag\" [size]=\"'small'\" [name]=\"selectedCountry?.label | lowercase\"></ms-flag-icon>\n \n <!-- Country Code -->\n <span class=\"country-code\">{{ selectedCountry?.dialCode || 'US' }}</span>\n \n <!-- Chevron Icon -->\n <span class=\"chevron-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/chevron-down.svg'\"></span>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"country-dropdown\" *ngIf=\"isDropdownOpen\">\n <!-- Search Input -->\n <div class=\"ms-position-relative phone-input-search\">\n <input\n type=\"text\"\n class=\"country-search\"\n placeholder=\"Search country...\"\n [value]=\"searchTerm\"\n (input)=\"onSearch($event)\" />\n <!-- <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span> -->\n <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n </div>\n \n\n <!-- Countries List -->\n <div class=\"countries-list\">\n <button\n *ngFor=\"let country of filteredCountries\"\n type=\"button\"\n class=\"country-item\"\n [class.active]=\"selectedCountry?.countryCode === country.countryCode\"\n (click)=\"selectCountry(country)\">\n \n <!-- Flag -->\n <!-- <img\n [src]=\"getCountryFlagPath(country)\"\n [alt]=\"country.label\"\n class=\"country-flag-small\" /> -->\n <ms-flag-icon class=\"country-flag-small\" [size]=\"'small'\" [name]=\"country?.label | lowercase\"></ms-flag-icon>\n \n <!-- Country Label and Code -->\n <div class=\"country-info\">\n <span class=\"country-label\">{{ country.label }}</span>\n <!-- <span class=\"country-code-dial\">{{ country.countryCode }} \u2022 {{ country.dialCode }}</span> -->\n </div>\n </button>\n </div>\n\n <!-- No Results -->\n <div *ngIf=\"filteredCountries.length === 0\" class=\"no-results\">\n No countries found\n </div>\n </div>\n </div>\n\n <!-- Phone Number Input -->\n <input\n type=\"tel\"\n class=\"ms-phone-input-field\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [placeholder]=\"placeholder\"\n [attr.pattern]=\"pattern || '[0-9\\\\-\\\\(\\\\)\\\\+\\\\s]*'\"\n [attr.inputmode]=\"'numeric'\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event);onChildFocus()\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\" />\n </div>\n</div>\n", styles: [".ms-phone-input-container{display:flex;flex-direction:column;width:100%}.ms-phone-input-container .ms-phone-input-group{position:relative}.ms-phone-input-container .ms-phone-input-group .ms-phone-country-selector{flex-shrink:0;border-right:1px solid var(--semantics-border-neutral-default, #CCCCCC)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper{display:inline-block;flex-shrink:0;border-right:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button{display:flex;align-items:center;gap:.5rem;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px 0 0 4px;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333);font-size:.875rem;font-weight:400;white-space:nowrap}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.disabled{opacity:.5;cursor:not-allowed}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-code{font-weight:500!important;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon svg{width:100%;height:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.active .chevron-icon{transform:rotate(180deg)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown{position:absolute;left:0;right:0;background:#fff;border-radius:12px;z-index:1000;min-width:280px;max-height:400px;overflow-y:auto;margin-top:.5rem;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search{padding:.75rem;margin:12px;font-size:.875rem;outline:none;background:#fff;box-sizing:border-box;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;width:-webkit-fill-available;padding-left:40px;font-weight:400}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search:focus{background-color:#fff}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search::placeholder{color:#6a6b6d}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .countries-list{display:flex;flex-direction:column}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;color:#1b1f22;font-size:14px}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:last-child{border-bottom:none}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:hover:not(.active){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active .country-label{color:var(--semantics-border-brand-default, #0084FF);font-weight:600}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info{display:flex;flex-direction:column;gap:.125rem;flex:1;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-label{font-size:.875rem;font-weight:500;color:var(--semantic-fg-neutral-strong, #333333)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-code-dial{font-size:.75rem;color:var(--semantic-fg-neutral-default, #666666)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .no-results{padding:1rem;text-align:center;color:var(--semantic-fg-neutral-default, #666666);font-size:.875rem}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-group.ms-common-hover:has(.ms-phone-input-field):focus{border:1px solid #D33C3C}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field{flex:1;border:none;background:none;padding:8px;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);font-family:inherit;outline:none}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field:disabled{cursor:not-allowed;opacity:.6}.ms-phone-input-container.ms-has-error .ms-phone-input-group{border-color:var(--semantic-fg-error-default, #D33C3C)!important;box-shadow:0 0 0 1px #da3e3740!important}.ms-phone-input-container.ms-has-success:not(.ms-has-error) .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF)!important}.ms-phone-input-container.ms-focus .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus .phone-country-selector-wrapper,.ms-phone-input-container.ms-has-success .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-success .ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-error .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #D33C3C}.ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.phone-input-search .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}\n"] }]
|
|
1833
|
+
args: [{ selector: 'app-ms-phone-input', imports: [CommonModule, FormsModule, InlineSVGModule, MsFlagIcon, MsIcon], template: "<!-- Phone Number Input with Country Selector -->\n<div class=\"ms-phone-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n <div class=\"ms-phone-input-group ms-common-hover ms-d-flex\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.ms-focus]=\"isChildFocused || state === 'ms-focus'\">\n \n <!-- Country Selector Dropdown (Left Side) -->\n <div class=\"phone-country-selector-wrapper\">\n <!-- Selector Button -->\n <button\n type=\"button\"\n class=\"country-selector-button\"\n [class.disabled]=\"disabled\"\n [class.active]=\"isDropdownOpen\"\n (click)=\"toggleDropdown()\"\n [disabled]=\"disabled\">\n \n <!-- Selected Country Flag -->\n <!-- <img\n *ngIf=\"selectedCountry?.countryCode\"\n [src]=\"getCountryFlagPath(selectedCountry)\"\n [alt]=\"selectedCountry?.label\"\n class=\"country-flag\" /> -->\n <ms-flag-icon *ngIf=\"selectedCountry?.countryCode\" class=\"country-flag\" [size]=\"'small'\" [name]=\"selectedCountry?.label | lowercase\"></ms-flag-icon>\n \n <!-- Country Code -->\n <span class=\"country-code\">{{ selectedCountry?.dialCode || 'US' }}</span>\n \n <!-- Chevron Icon -->\n <!-- <span class=\"chevron-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/chevron-down.svg'\"></span> -->\n <ms-icon class=\"chevron-icon\" [name]=\"'chevron-down'\" [color]=\"'ms-icon-black'\" [size]=\"'small'\"></ms-icon>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"country-dropdown\" *ngIf=\"isDropdownOpen\">\n <!-- Search Input -->\n <div class=\"ms-position-relative phone-input-search\">\n <input\n type=\"text\"\n class=\"country-search\"\n placeholder=\"Search country...\"\n [value]=\"searchTerm\"\n (input)=\"onSearch($event)\" />\n <!-- <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span> -->\n <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n </div>\n \n\n <!-- Countries List -->\n <div class=\"countries-list\">\n <button\n *ngFor=\"let country of filteredCountries\"\n type=\"button\"\n class=\"country-item\"\n [class.active]=\"selectedCountry?.countryCode === country.countryCode\"\n (click)=\"selectCountry(country)\">\n \n <!-- Flag -->\n <!-- <img\n [src]=\"getCountryFlagPath(country)\"\n [alt]=\"country.label\"\n class=\"country-flag-small\" /> -->\n <ms-flag-icon class=\"country-flag-small\" [size]=\"'small'\" [name]=\"country?.label | lowercase\"></ms-flag-icon>\n \n <!-- Country Label and Code -->\n <div class=\"country-info\">\n <span class=\"country-label\">{{ country.label }}</span>\n <!-- <span class=\"country-code-dial\">{{ country.countryCode }} \u2022 {{ country.dialCode }}</span> -->\n </div>\n </button>\n </div>\n\n <!-- No Results -->\n <div *ngIf=\"filteredCountries.length === 0\" class=\"no-results\">\n No countries found\n </div>\n </div>\n </div>\n\n <!-- Phone Number Input -->\n <input\n type=\"tel\"\n class=\"ms-phone-input-field\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [placeholder]=\"placeholder\"\n [attr.pattern]=\"pattern || '[0-9\\\\-\\\\(\\\\)\\\\+\\\\s]*'\"\n [attr.inputmode]=\"'numeric'\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event);onChildFocus()\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\" />\n </div>\n</div>\n", styles: [".ms-phone-input-container{display:flex;flex-direction:column;width:100%}.ms-phone-input-container .ms-phone-input-group{position:relative}.ms-phone-input-container .ms-phone-input-group .ms-phone-country-selector{flex-shrink:0;border-right:1px solid var(--semantics-border-neutral-default, #CCCCCC)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper{display:inline-block;flex-shrink:0;border-right:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button{display:flex;align-items:center;gap:.5rem;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px 0 0 4px;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333);font-size:.875rem;font-weight:400;white-space:nowrap}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.disabled{opacity:.5;cursor:not-allowed}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-code{font-weight:500!important;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon svg{width:100%;height:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.active .chevron-icon{transform:rotate(180deg)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown{position:absolute;left:0;right:0;background:#fff;border-radius:12px;z-index:1000;min-width:280px;max-height:400px;overflow-y:auto;margin-top:.5rem;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search{padding:.75rem;margin:12px;font-size:.875rem;outline:none;background:#fff;box-sizing:border-box;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;width:-webkit-fill-available;padding-left:40px;font-weight:400}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search:focus{background-color:#fff}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search::placeholder{color:#6a6b6d}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .countries-list{display:flex;flex-direction:column}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;color:#1b1f22;font-size:14px}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:last-child{border-bottom:none}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:hover:not(.active){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active .country-label{color:var(--semantics-border-brand-default, #0084FF);font-weight:600}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info{display:flex;flex-direction:column;gap:.125rem;flex:1;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-label{font-size:.875rem;font-weight:500;color:var(--semantic-fg-neutral-strong, #333333)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-code-dial{font-size:.75rem;color:var(--semantic-fg-neutral-default, #666666)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .no-results{padding:1rem;text-align:center;color:var(--semantic-fg-neutral-default, #666666);font-size:.875rem}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-group.ms-common-hover:has(.ms-phone-input-field):focus{border:1px solid #D33C3C}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field{flex:1;border:none;background:none;padding:8px;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);font-family:inherit;outline:none}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field:disabled{cursor:not-allowed;opacity:.6}.ms-phone-input-container.ms-has-error .ms-phone-input-group{border-color:var(--semantic-fg-error-default, #D33C3C)!important;box-shadow:0 0 0 1px #da3e3740!important}.ms-phone-input-container.ms-has-success:not(.ms-has-error) .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF)!important}.ms-phone-input-container.ms-focus .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus .phone-country-selector-wrapper,.ms-phone-input-container.ms-has-success .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-success .ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-error .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #D33C3C}.ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.phone-input-search .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}\n"] }]
|
|
1835
1834
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
|
|
1836
1835
|
type: Input
|
|
1837
1836
|
}], name: [{
|
|
@@ -2186,7 +2185,7 @@ class MsInputField {
|
|
|
2186
2185
|
useExisting: forwardRef(() => MsInputField),
|
|
2187
2186
|
multi: true,
|
|
2188
2187
|
},
|
|
2189
|
-
], ngImport: i0, template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(fieldType === 'quantity'){\n <div class=\"ms-quantity-field\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\"\n [class.ms-has-error]=\"invalid\"\n [class.ms-has-warning]=\"state === 'ms-warning'\"\n [class.ms-has-focus]=\"state === 'ms-focus'\">\n \n <input\n type=\"number\"\n class=\"ms-quantity-input ms-form-control ms-100\"\n [(ngModel)]=\"value\"\n [min]=\"minValue\"\n [max]=\"maxValue\"\n [step]=\"step\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"state\"\n (change)=\"onInputChange($event)\"\n placeholder=\"{{placeholder}}\">\n \n <div class=\"ms-quantity-controls\">\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-plus\"\n [disabled]=\"disabled || (getNumValue() >= maxValue)\"\n (click)=\"increment()\"\n [attr.aria-label]=\"'Increase quantity'\">\n <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/plus.svg'\">+</span>\n </button>\n <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/suffix-divider.svg'\"></span>\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-minus\"\n [disabled]=\"disabled || (getNumValue() <= minValue)\"\n (click)=\"decrement()\"\n [attr.aria-label]=\"'Decrease quantity'\">\n <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/minus.svg'\"></span>\n </button>\n </div>\n </div>\n }@else if(type === 'file'){\n <div class=\"ms-file-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\">\n <input\n type=\"file\"\n class=\"ms-file-input-hidden\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.accept]=\"accept || null\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileChange($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n #fileInputElement />\n \n <!-- File Input Field with Display and Button -->\n <div class=\"ms-file-input-field ms-d-flex ms-common-hover ms-overflow-hidden\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.focused]=\"state === 'ms-focus'\">\n <button \n type=\"button\"\n class=\"ms-file-choose-btn\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\">\n Choose File\n </button>\n <input\n type=\"button\"\n class=\"ms-file-input-display ms-w-100\"\n [value]=\"fileNames.length > 0 ? fileNames[0] : (placeholder || 'No file selected')\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\"\n [class.has-file]=\"fileNames.length > 0\" />\n </div>\n\n <!-- Selected Files List (for multiple files) -->\n <div *ngIf=\"fileNames.length > 0\" class=\"ms-file-list\">\n <div *ngFor=\"let fileName of fileNames; let i = index\" class=\"ms-file-item\">\n <ms-icon (click)=\"removeFile(i)\" class=\"ms_icon\" [color]=\"'ms-icon-black'\" [name]=\"'close'\" [size]=\"'small'\"></ms-icon>\n <!-- <span class=\"ms-file-name\">{{ fileName }}</span>\n <button \n type=\"button\" \n class=\"ms-file-remove\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\"\n aria-label=\"Remove file\">\n <ms-icon (click)=\"removeFile(i)\" class=\"ms_icon\" [name]=\"'close'\" [size]=\"'small'\"></ms-icon>\n </button> -->\n </div>\n </div>\n \n <!-- Error Message -->\n <div *ngIf=\"hasError() && fileErrorMessage\" class=\"ms-file-error-message\">\n {{ fileErrorMessage }}\n </div>\n </div>\n }@else if(type == 'password'){\n <app-ms-password-field\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [value]=\"value\"\n [autocomplete]=\"passwordAutocomplete\"\n [showRequirements]=\"showPasswordRequirements\"\n [minLength]=\"passwordMinLength\"\n [requireUppercase]=\"passwordRequireUppercase\"\n [requireLowercase]=\"passwordRequireLowercase\"\n [requireNumbers]=\"passwordRequireNumbers\"\n [requireSpecialChars]=\"passwordRequireSpecialChars\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (passwordStrengthChange)=\"passwordStrengthChange.emit($event)\">\n </app-ms-password-field>\n }@else if(type === 'phone'){\n <app-ms-phone-input\n [placeholder]=\"placeholder\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [state]=\"state\"\n [countryList]=\"countryList\"\n [value]=\"value\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (countryChange)=\"countryChange.emit($event)\">\n </app-ms-phone-input>\n }\n <!-- @else if(type === 'search'){\n <div class=\"ms-search-input-wrapper\">\n <input\n type=\"search\"\n class=\"ms-form-control ms-search-input\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || 'Search...'\"\n [attr.autocomplete]=\"autocomplete || 'off'\"\n [class.invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span class=\"ms-search-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span>\n </div>\n } -->\n @else if(fieldType === 'inline-editing'){\n <app-ms-inline-edit\n [placeholder]=\"placeholder\"\n [state]=\"state\"\n [disabled]=\"disabled\"\n [value]=\"value\"\n [required]=\"required\"\n [pattern]=\"pattern\"\n [minlength]=\"minlength\"\n [maxlength]=\"maxlength\"\n (change)=\"valueChange.emit($event)\">\n </app-ms-inline-edit>\n }@else if(prefix || suffix || type === 'search'){\n <div class=\"ms-input-wrapper\" [class.ms-has-prefix-container]=\"prefix\" [class.ms-has-suffix-container]=\"suffix\" [class.ms-has-search-icon]=\"type === 'search'\">\n <span *ngIf=\"prefix\" class=\"ms-input-prefix\">\n <!-- <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + prefix + '.svg'\" alt=\"prefix\" /> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"prefix\" [size]=\"'small'\"></ms-icon>\n </span>\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [class.ms-has-prefix]=\"prefix\"\n [class.ms-has-suffix]=\"suffix\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"type === 'search' ? (pattern || null) : (prefix ? '\\\\d+' : (pattern || null))\"\n [attr.inputmode]=\"type === 'search' ? (inputmode || null) : (prefix ? 'numeric' : (inputmode || null))\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span *ngIf=\"suffix\" class=\"ms-input-suffix\">\n <!-- <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + suffix + '.svg'\" alt=\"suffix\" /> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"suffix\" [size]=\"'small'\"></ms-icon>\n </span>\n </div>\n }\n @else{\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"pattern || null\"\n [attr.inputmode]=\"inputmode || null\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n }\n</ng-container>\n \n<ng-template #skeleton>\n <div class=\"ms-skeleton-input\"></div>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MsInlineEdit, selector: "app-ms-inline-edit", inputs: ["value", "placeholder", "fieldType", "disabled", "required", "readonly", "pattern", "minlength", "maxlength", "state"], outputs: ["change", "saved", "cancelled"] }, { kind: "component", type: MsPasswordField, selector: "app-ms-password-field", inputs: ["id", "name", "placeholder", "state", "autocomplete", "disabled", "required", "readonly", "skeleton", "value", "showRequirements", "minLength", "requireUppercase", "requireLowercase", "requireNumbers", "requireSpecialChars"], outputs: ["change", "focus", "blur", "keydown", "keyup", "passwordStrengthChange"] }, { kind: "component", type: MsPhoneInput, selector: "app-ms-phone-input", inputs: ["id", "name", "placeholder", "state", "readonly", "disabled", "required", "skeleton", "invalid", "pattern", "value", "countryList", "selectedCountry"], outputs: ["change", "focus", "blur", "keydown", "keyup", "countryChange"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i2$1.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
2188
|
+
], ngImport: i0, template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(fieldType === 'quantity'){\n <div class=\"ms-quantity-field\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\"\n [class.ms-has-error]=\"invalid\"\n [class.ms-has-warning]=\"state === 'ms-warning'\"\n [class.ms-has-focus]=\"state === 'ms-focus'\">\n \n <input\n type=\"number\"\n class=\"ms-quantity-input ms-form-control ms-100\"\n [(ngModel)]=\"value\"\n [min]=\"minValue\"\n [max]=\"maxValue\"\n [step]=\"step\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"state\"\n (change)=\"onInputChange($event)\"\n placeholder=\"{{placeholder}}\">\n \n <div class=\"ms-quantity-controls\">\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-plus\"\n [disabled]=\"disabled || (getNumValue() >= maxValue)\"\n (click)=\"increment()\"\n [attr.aria-label]=\"'Increase quantity'\">\n <!-- <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/plus.svg'\"></span> -->\n <ms-icon class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [name]=\"'add'\" [size]=\"'small'\"></ms-icon>\n </button>\n <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/suffix-divider.svg'\"></span>\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-minus\"\n [disabled]=\"disabled || (getNumValue() <= minValue)\"\n (click)=\"decrement()\"\n [attr.aria-label]=\"'Decrease quantity'\">\n <!-- <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/minus.svg'\"></span> -->\n <ms-icon class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [name]=\"'minus'\" [size]=\"'small'\"></ms-icon>\n </button>\n </div>\n </div>\n }@else if(type === 'file'){\n <div class=\"ms-file-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\">\n <input\n type=\"file\"\n class=\"ms-file-input-hidden\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.accept]=\"accept || null\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileChange($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n #fileInputElement />\n \n <!-- File Input Field with Display and Button -->\n <div class=\"ms-file-input-field ms-d-flex ms-common-hover ms-overflow-hidden\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.focused]=\"state === 'ms-focus'\">\n <button \n type=\"button\"\n class=\"ms-file-choose-btn\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\">\n Choose File\n </button>\n <input\n type=\"button\"\n class=\"ms-file-input-display ms-w-100\"\n [value]=\"fileNames.length > 0 ? fileNames[0] : (placeholder || 'No file selected')\"\n [title]=\"fileNames.length > 0 ? fileNames[0] : ''\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\"\n [class.has-file]=\"fileNames.length > 0\" />\n </div>\n\n <!-- Selected Files List (for multiple files) -->\n <div *ngIf=\"fileNames.length > 0\" class=\"ms-file-list\">\n <div *ngFor=\"let fileName of fileNames; let i = index\" class=\"ms-file-item\">\n <ms-icon (click)=\"removeFile(i)\" class=\"ms_icon\" [color]=\"'ms-icon-black'\" [name]=\"'close'\" [size]=\"'small'\"></ms-icon>\n <!-- <span class=\"ms-file-name\">{{ fileName }}</span>\n <button \n type=\"button\" \n class=\"ms-file-remove\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\"\n aria-label=\"Remove file\">\n <ms-icon (click)=\"removeFile(i)\" class=\"ms_icon\" [name]=\"'close'\" [size]=\"'small'\"></ms-icon>\n </button> -->\n </div>\n </div>\n \n <!-- Error Message -->\n <div *ngIf=\"hasError() && fileErrorMessage\" class=\"ms-file-error-message\">\n {{ fileErrorMessage }}\n </div>\n </div>\n }@else if(type == 'password'){\n <app-ms-password-field\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [value]=\"value\"\n [autocomplete]=\"passwordAutocomplete\"\n [showRequirements]=\"showPasswordRequirements\"\n [minLength]=\"passwordMinLength\"\n [requireUppercase]=\"passwordRequireUppercase\"\n [requireLowercase]=\"passwordRequireLowercase\"\n [requireNumbers]=\"passwordRequireNumbers\"\n [requireSpecialChars]=\"passwordRequireSpecialChars\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (passwordStrengthChange)=\"passwordStrengthChange.emit($event)\">\n </app-ms-password-field>\n }@else if(type === 'phone'){\n <app-ms-phone-input\n [placeholder]=\"placeholder\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [state]=\"state\"\n [countryList]=\"countryList\"\n [value]=\"value\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (countryChange)=\"countryChange.emit($event)\">\n </app-ms-phone-input>\n }\n <!-- @else if(type === 'search'){\n <div class=\"ms-search-input-wrapper\">\n <input\n type=\"search\"\n class=\"ms-form-control ms-search-input\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || 'Search...'\"\n [attr.autocomplete]=\"autocomplete || 'off'\"\n [class.invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span class=\"ms-search-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/search.svg'\"></span>\n </div>\n } -->\n @else if(fieldType === 'inline-editing'){\n <app-ms-inline-edit\n [placeholder]=\"placeholder\"\n [state]=\"state\"\n [disabled]=\"disabled\"\n [value]=\"value\"\n [required]=\"required\"\n [pattern]=\"pattern\"\n [minlength]=\"minlength\"\n [maxlength]=\"maxlength\"\n (change)=\"valueChange.emit($event)\">\n </app-ms-inline-edit>\n }@else if(prefix || suffix || type === 'search'){\n <div class=\"ms-input-wrapper\" [class.ms-has-prefix-container]=\"prefix\" [class.ms-has-suffix-container]=\"suffix\" [class.ms-has-search-icon]=\"type === 'search'\">\n <span *ngIf=\"prefix\" class=\"ms-input-prefix\">\n <!-- <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + prefix + '.svg'\" alt=\"prefix\" /> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"prefix\" [size]=\"'small'\"></ms-icon>\n </span>\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [class.ms-has-prefix]=\"prefix\"\n [class.ms-has-suffix]=\"suffix\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"type === 'search' ? (pattern || null) : (prefix ? '\\\\d+' : (pattern || null))\"\n [attr.inputmode]=\"type === 'search' ? (inputmode || null) : (prefix ? 'numeric' : (inputmode || null))\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span *ngIf=\"suffix\" class=\"ms-input-suffix\">\n <!-- <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + suffix + '.svg'\" alt=\"suffix\" /> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"suffix\" [size]=\"'small'\"></ms-icon>\n </span>\n </div>\n }\n @else{\n <input\n class=\"ms-form-control\"\n [ngClass]=\"state\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [attr.type]=\"type\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"pattern || null\"\n [attr.inputmode]=\"inputmode || null\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n }\n</ng-container>\n \n<ng-template #skeleton>\n <div class=\"ms-skeleton-input\"></div>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MsInlineEdit, selector: "app-ms-inline-edit", inputs: ["value", "placeholder", "fieldType", "disabled", "required", "readonly", "pattern", "minlength", "maxlength", "state"], outputs: ["change", "saved", "cancelled"] }, { kind: "component", type: MsPasswordField, selector: "app-ms-password-field", inputs: ["id", "name", "placeholder", "state", "autocomplete", "disabled", "required", "readonly", "skeleton", "value", "showRequirements", "minLength", "requireUppercase", "requireLowercase", "requireNumbers", "requireSpecialChars"], outputs: ["change", "focus", "blur", "keydown", "keyup", "passwordStrengthChange"] }, { kind: "component", type: MsPhoneInput, selector: "app-ms-phone-input", inputs: ["id", "name", "placeholder", "state", "readonly", "disabled", "required", "skeleton", "invalid", "pattern", "value", "countryList", "selectedCountry"], outputs: ["change", "focus", "blur", "keydown", "keyup", "countryChange"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
2190
2189
|
}
|
|
2191
2190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsInputField, decorators: [{
|
|
2192
2191
|
type: Component,
|
|
@@ -2196,7 +2195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2196
2195
|
useExisting: forwardRef(() => MsInputField),
|
|
2197
2196
|
multi: true,
|
|
2198
2197
|
},
|
|
2199
|
-
], template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(fieldType === 'quantity'){\n <div class=\"ms-quantity-field\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\"\n [class.ms-has-error]=\"invalid\"\n [class.ms-has-warning]=\"state === 'ms-warning'\"\n [class.ms-has-focus]=\"state === 'ms-focus'\">\n \n <input\n type=\"number\"\n class=\"ms-quantity-input ms-form-control ms-100\"\n [(ngModel)]=\"value\"\n [min]=\"minValue\"\n [max]=\"maxValue\"\n [step]=\"step\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"state\"\n (change)=\"onInputChange($event)\"\n placeholder=\"{{placeholder}}\">\n \n <div class=\"ms-quantity-controls\">\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-plus\"\n [disabled]=\"disabled || (getNumValue() >= maxValue)\"\n (click)=\"increment()\"\n [attr.aria-label]=\"'Increase quantity'\">\n <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/plus.svg'\">+</span>\n </button>\n <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/suffix-divider.svg'\"></span>\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-minus\"\n [disabled]=\"disabled || (getNumValue() <= minValue)\"\n (click)=\"decrement()\"\n [attr.aria-label]=\"'Decrease quantity'\">\n <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/minus.svg'\"></span>\n </button>\n </div>\n </div>\n }@else if(type === 'file'){\n <div class=\"ms-file-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\">\n <input\n type=\"file\"\n class=\"ms-file-input-hidden\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.accept]=\"accept || null\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileChange($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n #fileInputElement />\n \n <!-- File Input Field with Display and Button -->\n <div class=\"ms-file-input-field ms-d-flex ms-common-hover ms-overflow-hidden\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.focused]=\"state === 'ms-focus'\">\n <button \n type=\"button\"\n class=\"ms-file-choose-btn\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\">\n Choose File\n </button>\n <input\n type=\"button\"\n class=\"ms-file-input-display ms-w-100\"\n [value]=\"fileNames.length > 0 ? fileNames[0] : (placeholder || 'No file selected')\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\"\n [class.has-file]=\"fileNames.length > 0\" />\n </div>\n\n <!-- Selected Files List (for multiple files) -->\n <div *ngIf=\"fileNames.length > 0\" class=\"ms-file-list\">\n <div *ngFor=\"let fileName of fileNames; let i = index\" class=\"ms-file-item\">\n <ms-icon (click)=\"removeFile(i)\" class=\"ms_icon\" [color]=\"'ms-icon-black'\" [name]=\"'close'\" [size]=\"'small'\"></ms-icon>\n <!-- <span class=\"ms-file-name\">{{ fileName }}</span>\n <button \n type=\"button\" \n class=\"ms-file-remove\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\"\n aria-label=\"Remove file\">\n <ms-icon (click)=\"removeFile(i)\" class=\"ms_icon\" [name]=\"'close'\" [size]=\"'small'\"></ms-icon>\n </button> -->\n </div>\n </div>\n \n <!-- Error Message -->\n <div *ngIf=\"hasError() && fileErrorMessage\" class=\"ms-file-error-message\">\n {{ fileErrorMessage }}\n </div>\n </div>\n }@else if(type == 'password'){\n <app-ms-password-field\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [value]=\"value\"\n [autocomplete]=\"passwordAutocomplete\"\n [showRequirements]=\"showPasswordRequirements\"\n [minLength]=\"passwordMinLength\"\n [requireUppercase]=\"passwordRequireUppercase\"\n [requireLowercase]=\"passwordRequireLowercase\"\n [requireNumbers]=\"passwordRequireNumbers\"\n [requireSpecialChars]=\"passwordRequireSpecialChars\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (passwordStrengthChange)=\"passwordStrengthChange.emit($event)\">\n </app-ms-password-field>\n }@else if(type === 'phone'){\n <app-ms-phone-input\n [placeholder]=\"placeholder\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [state]=\"state\"\n [countryList]=\"countryList\"\n [value]=\"value\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (countryChange)=\"countryChange.emit($event)\">\n </app-ms-phone-input>\n }\n <!-- @else if(type === 'search'){\n <div class=\"ms-search-input-wrapper\">\n <input\n type=\"search\"\n class=\"ms-form-control ms-search-input\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || 'Search...'\"\n [attr.autocomplete]=\"autocomplete || 'off'\"\n [class.invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span class=\"ms-search-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span>\n </div>\n } -->\n @else if(fieldType === 'inline-editing'){\n <app-ms-inline-edit\n [placeholder]=\"placeholder\"\n [state]=\"state\"\n [disabled]=\"disabled\"\n [value]=\"value\"\n [required]=\"required\"\n [pattern]=\"pattern\"\n [minlength]=\"minlength\"\n [maxlength]=\"maxlength\"\n (change)=\"valueChange.emit($event)\">\n </app-ms-inline-edit>\n }@else if(prefix || suffix || type === 'search'){\n <div class=\"ms-input-wrapper\" [class.ms-has-prefix-container]=\"prefix\" [class.ms-has-suffix-container]=\"suffix\" [class.ms-has-search-icon]=\"type === 'search'\">\n <span *ngIf=\"prefix\" class=\"ms-input-prefix\">\n <!-- <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + prefix + '.svg'\" alt=\"prefix\" /> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"prefix\" [size]=\"'small'\"></ms-icon>\n </span>\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [class.ms-has-prefix]=\"prefix\"\n [class.ms-has-suffix]=\"suffix\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"type === 'search' ? (pattern || null) : (prefix ? '\\\\d+' : (pattern || null))\"\n [attr.inputmode]=\"type === 'search' ? (inputmode || null) : (prefix ? 'numeric' : (inputmode || null))\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span *ngIf=\"suffix\" class=\"ms-input-suffix\">\n <!-- <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + suffix + '.svg'\" alt=\"suffix\" /> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"suffix\" [size]=\"'small'\"></ms-icon>\n </span>\n </div>\n }\n @else{\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"pattern || null\"\n [attr.inputmode]=\"inputmode || null\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n }\n</ng-container>\n \n<ng-template #skeleton>\n <div class=\"ms-skeleton-input\"></div>\n</ng-template>" }]
|
|
2198
|
+
], template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(fieldType === 'quantity'){\n <div class=\"ms-quantity-field\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\"\n [class.ms-has-error]=\"invalid\"\n [class.ms-has-warning]=\"state === 'ms-warning'\"\n [class.ms-has-focus]=\"state === 'ms-focus'\">\n \n <input\n type=\"number\"\n class=\"ms-quantity-input ms-form-control ms-100\"\n [(ngModel)]=\"value\"\n [min]=\"minValue\"\n [max]=\"maxValue\"\n [step]=\"step\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"state\"\n (change)=\"onInputChange($event)\"\n placeholder=\"{{placeholder}}\">\n \n <div class=\"ms-quantity-controls\">\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-plus\"\n [disabled]=\"disabled || (getNumValue() >= maxValue)\"\n (click)=\"increment()\"\n [attr.aria-label]=\"'Increase quantity'\">\n <!-- <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/plus.svg'\"></span> -->\n <ms-icon class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [name]=\"'add'\" [size]=\"'small'\"></ms-icon>\n </button>\n <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/suffix-divider.svg'\"></span>\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-minus\"\n [disabled]=\"disabled || (getNumValue() <= minValue)\"\n (click)=\"decrement()\"\n [attr.aria-label]=\"'Decrease quantity'\">\n <!-- <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/minus.svg'\"></span> -->\n <ms-icon class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [name]=\"'minus'\" [size]=\"'small'\"></ms-icon>\n </button>\n </div>\n </div>\n }@else if(type === 'file'){\n <div class=\"ms-file-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\">\n <input\n type=\"file\"\n class=\"ms-file-input-hidden\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.accept]=\"accept || null\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileChange($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n #fileInputElement />\n \n <!-- File Input Field with Display and Button -->\n <div class=\"ms-file-input-field ms-d-flex ms-common-hover ms-overflow-hidden\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.focused]=\"state === 'ms-focus'\">\n <button \n type=\"button\"\n class=\"ms-file-choose-btn\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\">\n Choose File\n </button>\n <input\n type=\"button\"\n class=\"ms-file-input-display ms-w-100\"\n [value]=\"fileNames.length > 0 ? fileNames[0] : (placeholder || 'No file selected')\"\n [title]=\"fileNames.length > 0 ? fileNames[0] : ''\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\"\n [class.has-file]=\"fileNames.length > 0\" />\n </div>\n\n <!-- Selected Files List (for multiple files) -->\n <div *ngIf=\"fileNames.length > 0\" class=\"ms-file-list\">\n <div *ngFor=\"let fileName of fileNames; let i = index\" class=\"ms-file-item\">\n <ms-icon (click)=\"removeFile(i)\" class=\"ms_icon\" [color]=\"'ms-icon-black'\" [name]=\"'close'\" [size]=\"'small'\"></ms-icon>\n <!-- <span class=\"ms-file-name\">{{ fileName }}</span>\n <button \n type=\"button\" \n class=\"ms-file-remove\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\"\n aria-label=\"Remove file\">\n <ms-icon (click)=\"removeFile(i)\" class=\"ms_icon\" [name]=\"'close'\" [size]=\"'small'\"></ms-icon>\n </button> -->\n </div>\n </div>\n \n <!-- Error Message -->\n <div *ngIf=\"hasError() && fileErrorMessage\" class=\"ms-file-error-message\">\n {{ fileErrorMessage }}\n </div>\n </div>\n }@else if(type == 'password'){\n <app-ms-password-field\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [value]=\"value\"\n [autocomplete]=\"passwordAutocomplete\"\n [showRequirements]=\"showPasswordRequirements\"\n [minLength]=\"passwordMinLength\"\n [requireUppercase]=\"passwordRequireUppercase\"\n [requireLowercase]=\"passwordRequireLowercase\"\n [requireNumbers]=\"passwordRequireNumbers\"\n [requireSpecialChars]=\"passwordRequireSpecialChars\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (passwordStrengthChange)=\"passwordStrengthChange.emit($event)\">\n </app-ms-password-field>\n }@else if(type === 'phone'){\n <app-ms-phone-input\n [placeholder]=\"placeholder\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [state]=\"state\"\n [countryList]=\"countryList\"\n [value]=\"value\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (countryChange)=\"countryChange.emit($event)\">\n </app-ms-phone-input>\n }\n <!-- @else if(type === 'search'){\n <div class=\"ms-search-input-wrapper\">\n <input\n type=\"search\"\n class=\"ms-form-control ms-search-input\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || 'Search...'\"\n [attr.autocomplete]=\"autocomplete || 'off'\"\n [class.invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span class=\"ms-search-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/search.svg'\"></span>\n </div>\n } -->\n @else if(fieldType === 'inline-editing'){\n <app-ms-inline-edit\n [placeholder]=\"placeholder\"\n [state]=\"state\"\n [disabled]=\"disabled\"\n [value]=\"value\"\n [required]=\"required\"\n [pattern]=\"pattern\"\n [minlength]=\"minlength\"\n [maxlength]=\"maxlength\"\n (change)=\"valueChange.emit($event)\">\n </app-ms-inline-edit>\n }@else if(prefix || suffix || type === 'search'){\n <div class=\"ms-input-wrapper\" [class.ms-has-prefix-container]=\"prefix\" [class.ms-has-suffix-container]=\"suffix\" [class.ms-has-search-icon]=\"type === 'search'\">\n <span *ngIf=\"prefix\" class=\"ms-input-prefix\">\n <!-- <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + prefix + '.svg'\" alt=\"prefix\" /> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"prefix\" [size]=\"'small'\"></ms-icon>\n </span>\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [class.ms-has-prefix]=\"prefix\"\n [class.ms-has-suffix]=\"suffix\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"type === 'search' ? (pattern || null) : (prefix ? '\\\\d+' : (pattern || null))\"\n [attr.inputmode]=\"type === 'search' ? (inputmode || null) : (prefix ? 'numeric' : (inputmode || null))\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span *ngIf=\"suffix\" class=\"ms-input-suffix\">\n <!-- <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + suffix + '.svg'\" alt=\"suffix\" /> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"suffix\" [size]=\"'small'\"></ms-icon>\n </span>\n </div>\n }\n @else{\n <input\n class=\"ms-form-control\"\n [ngClass]=\"state\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [attr.type]=\"type\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"pattern || null\"\n [attr.inputmode]=\"inputmode || null\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n }\n</ng-container>\n \n<ng-template #skeleton>\n <div class=\"ms-skeleton-input\"></div>\n</ng-template>" }]
|
|
2200
2199
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
|
|
2201
2200
|
type: Input
|
|
2202
2201
|
}], id: [{
|
|
@@ -2289,6 +2288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2289
2288
|
|
|
2290
2289
|
class MsTextArea {
|
|
2291
2290
|
elementRef;
|
|
2291
|
+
cdr;
|
|
2292
2292
|
id;
|
|
2293
2293
|
name;
|
|
2294
2294
|
placeholder;
|
|
@@ -2324,11 +2324,27 @@ class MsTextArea {
|
|
|
2324
2324
|
listType = 'none';
|
|
2325
2325
|
showLinkDropdown = false;
|
|
2326
2326
|
showImageDropdown = false;
|
|
2327
|
+
showAiDropdown = false;
|
|
2328
|
+
aiPrompt = '';
|
|
2329
|
+
isGenerating = false;
|
|
2327
2330
|
textArea;
|
|
2331
|
+
fileInput;
|
|
2328
2332
|
linkUrl = '';
|
|
2329
2333
|
linkText = '';
|
|
2330
2334
|
imageUrl = '';
|
|
2331
2335
|
imageAlt = '';
|
|
2336
|
+
isDragging = false;
|
|
2337
|
+
selectedFiles = [];
|
|
2338
|
+
insertedImages = [];
|
|
2339
|
+
hasInsertedImages = false;
|
|
2340
|
+
resizingImageId = null;
|
|
2341
|
+
isResizing = false;
|
|
2342
|
+
resizeStartX = 0;
|
|
2343
|
+
resizeStartY = 0;
|
|
2344
|
+
resizeStartWidth = 0;
|
|
2345
|
+
resizeStartHeight = 0;
|
|
2346
|
+
resizeDirection = '';
|
|
2347
|
+
http = inject(HttpClient);
|
|
2332
2348
|
formattingItems = [
|
|
2333
2349
|
{ label: 'Left align', value: 'left' },
|
|
2334
2350
|
{ label: 'Center align', value: 'center' },
|
|
@@ -2346,14 +2362,18 @@ class MsTextArea {
|
|
|
2346
2362
|
{ label: 'Heading 3', value: 'h3' },
|
|
2347
2363
|
];
|
|
2348
2364
|
// Events
|
|
2365
|
+
valueChange = new EventEmitter();
|
|
2366
|
+
textChange = new EventEmitter();
|
|
2367
|
+
imageChange = new EventEmitter();
|
|
2349
2368
|
change = new EventEmitter();
|
|
2350
2369
|
focus = new EventEmitter();
|
|
2351
2370
|
blur = new EventEmitter();
|
|
2352
2371
|
// CVA hooks
|
|
2353
2372
|
onChange = () => { };
|
|
2354
2373
|
onTouched = () => { };
|
|
2355
|
-
constructor(elementRef) {
|
|
2374
|
+
constructor(elementRef, cdr) {
|
|
2356
2375
|
this.elementRef = elementRef;
|
|
2376
|
+
this.cdr = cdr;
|
|
2357
2377
|
}
|
|
2358
2378
|
ngOnInit() {
|
|
2359
2379
|
if (this.state === 'ms-error') {
|
|
@@ -2377,6 +2397,8 @@ class MsTextArea {
|
|
|
2377
2397
|
const newVal = target.value;
|
|
2378
2398
|
this.value.set(newVal);
|
|
2379
2399
|
this.onChange(newVal);
|
|
2400
|
+
this.valueChange.emit(newVal);
|
|
2401
|
+
this.emitTextChange();
|
|
2380
2402
|
// Required check
|
|
2381
2403
|
if (this.required && !newVal) {
|
|
2382
2404
|
this.hasError.set(true);
|
|
@@ -2423,21 +2445,21 @@ class MsTextArea {
|
|
|
2423
2445
|
}
|
|
2424
2446
|
onDocumentClick(event) {
|
|
2425
2447
|
const target = event.target;
|
|
2426
|
-
|
|
2427
|
-
const linkButton = target.closest('button[title="Insert Link"]');
|
|
2448
|
+
const clickedOnLinkButton = target.closest('[title="Insert Link"]') !== null;
|
|
2428
2449
|
const linkDropdown = this.elementRef.nativeElement.querySelector('.link-dropdown');
|
|
2429
2450
|
const clickedInsideLinkDropdown = linkDropdown?.contains(target);
|
|
2430
|
-
|
|
2431
|
-
const imageButton = target.closest('button[title="Insert Image"]');
|
|
2451
|
+
const clickedOnImageButton = target.closest('[title="Insert Image"]') !== null;
|
|
2432
2452
|
const imageDropdown = this.elementRef.nativeElement.querySelector('.image-dropdown');
|
|
2433
2453
|
const clickedInsideImageDropdown = imageDropdown?.contains(target);
|
|
2434
2454
|
// Close link dropdown if clicked outside (including other dropdowns)
|
|
2435
|
-
if (this.showLinkDropdown && !clickedInsideLinkDropdown && !
|
|
2455
|
+
if (this.showLinkDropdown && !clickedInsideLinkDropdown && !clickedOnLinkButton) {
|
|
2436
2456
|
this.showLinkDropdown = false;
|
|
2457
|
+
this.cdr.detectChanges();
|
|
2437
2458
|
}
|
|
2438
2459
|
// Close image dropdown if clicked outside (including other dropdowns)
|
|
2439
|
-
if (this.showImageDropdown && !clickedInsideImageDropdown && !
|
|
2460
|
+
if (this.showImageDropdown && !clickedInsideImageDropdown && !clickedOnImageButton) {
|
|
2440
2461
|
this.showImageDropdown = false;
|
|
2462
|
+
this.cdr.detectChanges();
|
|
2441
2463
|
}
|
|
2442
2464
|
}
|
|
2443
2465
|
changeParagraphType(type) {
|
|
@@ -2540,12 +2562,115 @@ class MsTextArea {
|
|
|
2540
2562
|
changeTextAlignment(alignment) {
|
|
2541
2563
|
this.textAlignment = alignment;
|
|
2542
2564
|
}
|
|
2565
|
+
// AI Content Generation
|
|
2566
|
+
toggleAiDropdown() {
|
|
2567
|
+
this.showAiDropdown = !this.showAiDropdown;
|
|
2568
|
+
if (this.showAiDropdown) {
|
|
2569
|
+
this.showLinkDropdown = false;
|
|
2570
|
+
this.showImageDropdown = false;
|
|
2571
|
+
}
|
|
2572
|
+
this.cdr.detectChanges();
|
|
2573
|
+
}
|
|
2574
|
+
closeAiDropdown() {
|
|
2575
|
+
this.showAiDropdown = false;
|
|
2576
|
+
}
|
|
2577
|
+
async generateAiContent() {
|
|
2578
|
+
if (!this.aiPrompt.trim()) {
|
|
2579
|
+
alert('Please enter a description');
|
|
2580
|
+
return;
|
|
2581
|
+
}
|
|
2582
|
+
this.isGenerating = true;
|
|
2583
|
+
this.cdr.detectChanges();
|
|
2584
|
+
const GROQ_API_KEY = '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';
|
|
2585
|
+
const GROQ_API_URL = 'https://api.groq.com/openai/v1/chat/completions';
|
|
2586
|
+
try {
|
|
2587
|
+
const response = await fetch(GROQ_API_URL, {
|
|
2588
|
+
method: 'POST',
|
|
2589
|
+
headers: {
|
|
2590
|
+
'Content-Type': 'application/json',
|
|
2591
|
+
'Authorization': `Bearer ${GROQ_API_KEY}`
|
|
2592
|
+
},
|
|
2593
|
+
body: JSON.stringify({
|
|
2594
|
+
model: 'llama3-8b-8192',
|
|
2595
|
+
messages: [
|
|
2596
|
+
{
|
|
2597
|
+
role: 'system',
|
|
2598
|
+
content: 'You are a professional content writer.'
|
|
2599
|
+
},
|
|
2600
|
+
{
|
|
2601
|
+
role: 'user',
|
|
2602
|
+
content: this.aiPrompt
|
|
2603
|
+
}
|
|
2604
|
+
],
|
|
2605
|
+
temperature: 0.7,
|
|
2606
|
+
max_tokens: 300
|
|
2607
|
+
})
|
|
2608
|
+
});
|
|
2609
|
+
if (!response.ok) {
|
|
2610
|
+
const err = await response.json();
|
|
2611
|
+
throw new Error(err?.error?.message || 'Groq API failed');
|
|
2612
|
+
}
|
|
2613
|
+
const data = await response.json();
|
|
2614
|
+
const generatedText = data?.choices?.[0]?.message?.content?.trim();
|
|
2615
|
+
if (!generatedText) {
|
|
2616
|
+
throw new Error('No content generated');
|
|
2617
|
+
}
|
|
2618
|
+
this.insertGeneratedContent(generatedText);
|
|
2619
|
+
}
|
|
2620
|
+
catch (error) {
|
|
2621
|
+
console.warn('Groq failed, using mock content', error);
|
|
2622
|
+
const fallback = this.generateMockContent(this.aiPrompt);
|
|
2623
|
+
this.insertGeneratedContent(fallback);
|
|
2624
|
+
}
|
|
2625
|
+
finally {
|
|
2626
|
+
this.isGenerating = false;
|
|
2627
|
+
this.cdr.detectChanges();
|
|
2628
|
+
}
|
|
2629
|
+
}
|
|
2630
|
+
// Generate mock AI content for demo purposes
|
|
2631
|
+
generateMockContent(prompt) {
|
|
2632
|
+
const templates = [
|
|
2633
|
+
`Based on your request about "${prompt}", here's a professionally crafted response:\n\nThis content addresses the key points you mentioned. It's designed to be clear, concise, and relevant to your needs. The generated text maintains a professional tone while ensuring readability and engagement.\n\nKey highlights include structured information, practical insights, and actionable content that aligns with your description.`,
|
|
2634
|
+
`Here's AI-generated content for: "${prompt}"\n\nThis response provides comprehensive coverage of your topic. The content is organized logically, making it easy to understand and use. It incorporates best practices and maintains consistency throughout.\n\nThe generated text is suitable for various applications and can be easily adapted to your specific requirements.`,
|
|
2635
|
+
`Content generated for: "${prompt}"\n\nThis AI-crafted text delivers value by addressing your request directly. It combines clarity with depth, ensuring the message is both accessible and informative.\n\nThe structure supports easy scanning while providing enough detail for thorough understanding. Feel free to modify and adapt this content as needed.`
|
|
2636
|
+
];
|
|
2637
|
+
// Simple hash function to pick template consistently for same prompt
|
|
2638
|
+
let hash = 0;
|
|
2639
|
+
for (let i = 0; i < prompt.length; i++) {
|
|
2640
|
+
hash = ((hash << 5) - hash) + prompt.charCodeAt(i);
|
|
2641
|
+
hash = hash & hash;
|
|
2642
|
+
}
|
|
2643
|
+
const templateIndex = Math.abs(hash) % templates.length;
|
|
2644
|
+
return templates[templateIndex];
|
|
2645
|
+
}
|
|
2646
|
+
// Insert generated content into textarea
|
|
2647
|
+
insertGeneratedContent(generatedContent) {
|
|
2648
|
+
const textarea = this.textArea.nativeElement;
|
|
2649
|
+
const start = textarea.selectionStart;
|
|
2650
|
+
const end = textarea.selectionEnd;
|
|
2651
|
+
this.textValue =
|
|
2652
|
+
this.textValue.substring(0, start) +
|
|
2653
|
+
generatedContent +
|
|
2654
|
+
this.textValue.substring(end);
|
|
2655
|
+
textarea.value = this.textValue;
|
|
2656
|
+
// Reset cursor position
|
|
2657
|
+
setTimeout(() => {
|
|
2658
|
+
textarea.selectionStart = textarea.selectionEnd = start + generatedContent.length;
|
|
2659
|
+
textarea.focus();
|
|
2660
|
+
});
|
|
2661
|
+
this.aiPrompt = '';
|
|
2662
|
+
this.closeAiDropdown();
|
|
2663
|
+
this.isGenerating = false;
|
|
2664
|
+
this.cdr.detectChanges();
|
|
2665
|
+
}
|
|
2543
2666
|
// Link insertion methods
|
|
2544
2667
|
toggleLinkDropdown() {
|
|
2545
2668
|
this.showLinkDropdown = !this.showLinkDropdown;
|
|
2546
2669
|
if (this.showLinkDropdown) {
|
|
2547
2670
|
this.showImageDropdown = false;
|
|
2671
|
+
this.showAiDropdown = false;
|
|
2548
2672
|
}
|
|
2673
|
+
this.cdr.detectChanges();
|
|
2549
2674
|
}
|
|
2550
2675
|
closeLinkDropdown() {
|
|
2551
2676
|
this.showLinkDropdown = false;
|
|
@@ -2559,11 +2684,11 @@ class MsTextArea {
|
|
|
2559
2684
|
const start = textarea.selectionStart;
|
|
2560
2685
|
const end = textarea.selectionEnd;
|
|
2561
2686
|
const linkMarkdown = `[${this.linkText}](${this.linkUrl})`;
|
|
2562
|
-
// Insert at cursor position
|
|
2563
2687
|
this.textValue =
|
|
2564
2688
|
this.textValue.substring(0, start) +
|
|
2565
2689
|
linkMarkdown +
|
|
2566
2690
|
this.textValue.substring(end);
|
|
2691
|
+
textarea.value = this.textValue;
|
|
2567
2692
|
// Restore cursor position after insertion
|
|
2568
2693
|
setTimeout(() => {
|
|
2569
2694
|
textarea.selectionStart =
|
|
@@ -2575,46 +2700,223 @@ class MsTextArea {
|
|
|
2575
2700
|
this.linkUrl = '';
|
|
2576
2701
|
this.linkText = '';
|
|
2577
2702
|
this.closeLinkDropdown();
|
|
2703
|
+
this.cdr.detectChanges();
|
|
2578
2704
|
}
|
|
2579
2705
|
// Image insertion methods
|
|
2580
2706
|
toggleImageDropdown() {
|
|
2581
2707
|
this.showImageDropdown = !this.showImageDropdown;
|
|
2582
2708
|
if (this.showImageDropdown) {
|
|
2583
2709
|
this.showLinkDropdown = false;
|
|
2710
|
+
this.showAiDropdown = false;
|
|
2584
2711
|
}
|
|
2712
|
+
this.cdr.detectChanges();
|
|
2585
2713
|
}
|
|
2586
2714
|
closeImageDropdown() {
|
|
2587
2715
|
this.showImageDropdown = false;
|
|
2588
2716
|
}
|
|
2589
2717
|
insertImage() {
|
|
2590
|
-
if (
|
|
2591
|
-
alert('Please
|
|
2718
|
+
if (this.selectedFiles.length === 0) {
|
|
2719
|
+
alert('Please select images');
|
|
2592
2720
|
return;
|
|
2593
2721
|
}
|
|
2594
|
-
const
|
|
2595
|
-
|
|
2596
|
-
|
|
2722
|
+
const textarea = this.textArea.nativeElement;
|
|
2723
|
+
const start = textarea.selectionStart;
|
|
2724
|
+
const end = textarea.selectionEnd;
|
|
2725
|
+
const currentText = this.textValue || '';
|
|
2726
|
+
let imagesToInsert = '';
|
|
2727
|
+
// Insert from selected files
|
|
2728
|
+
this.selectedFiles.forEach((item, index) => {
|
|
2729
|
+
const imageId = 'img-' + Date.now() + '-' + index;
|
|
2730
|
+
imagesToInsert += `[IMAGE:${imageId}]\n`;
|
|
2731
|
+
this.insertedImages.push({ url: item.preview, id: imageId, width: 64, height: 64 });
|
|
2732
|
+
});
|
|
2733
|
+
// Insert images at cursor position
|
|
2734
|
+
this.textValue = currentText.substring(0, start) + imagesToInsert + currentText.substring(end);
|
|
2735
|
+
// Reset state
|
|
2736
|
+
this.selectedFiles = [];
|
|
2737
|
+
this.hasInsertedImages = true;
|
|
2597
2738
|
this.closeImageDropdown();
|
|
2739
|
+
this.emitTextChange();
|
|
2740
|
+
this.cdr.detectChanges();
|
|
2741
|
+
// Restore cursor position
|
|
2742
|
+
setTimeout(() => {
|
|
2743
|
+
textarea.selectionStart = textarea.selectionEnd = start + imagesToInsert.length;
|
|
2744
|
+
textarea.focus();
|
|
2745
|
+
this.renderImagesInTextarea();
|
|
2746
|
+
});
|
|
2747
|
+
}
|
|
2748
|
+
renderImagesInTextarea() {
|
|
2749
|
+
// This will be used to display image thumbnails visually
|
|
2750
|
+
// For now, we'll rely on the visual display below the textarea
|
|
2751
|
+
this.cdr.detectChanges();
|
|
2598
2752
|
}
|
|
2599
|
-
|
|
2600
|
-
|
|
2753
|
+
emitTextChange() {
|
|
2754
|
+
this.textChange.emit({
|
|
2755
|
+
text: this.textValue,
|
|
2756
|
+
images: this.insertedImages
|
|
2757
|
+
});
|
|
2758
|
+
this.imageChange.emit(this.insertedImages);
|
|
2759
|
+
}
|
|
2760
|
+
onFileSelect(event) {
|
|
2761
|
+
const input = event.target;
|
|
2762
|
+
if (input.files && input.files.length > 0) {
|
|
2763
|
+
Array.from(input.files).forEach(file => {
|
|
2764
|
+
if (file.type.startsWith('image/')) {
|
|
2765
|
+
const preview = URL.createObjectURL(file);
|
|
2766
|
+
this.selectedFiles.push({ file, preview });
|
|
2767
|
+
}
|
|
2768
|
+
});
|
|
2769
|
+
this.cdr.detectChanges();
|
|
2770
|
+
}
|
|
2771
|
+
}
|
|
2772
|
+
onDragOver(event) {
|
|
2773
|
+
event.preventDefault();
|
|
2774
|
+
event.stopPropagation();
|
|
2775
|
+
this.isDragging = true;
|
|
2776
|
+
}
|
|
2777
|
+
onDragLeave(event) {
|
|
2778
|
+
event.preventDefault();
|
|
2779
|
+
event.stopPropagation();
|
|
2780
|
+
this.isDragging = false;
|
|
2781
|
+
}
|
|
2782
|
+
onDrop(event) {
|
|
2783
|
+
event.preventDefault();
|
|
2784
|
+
event.stopPropagation();
|
|
2785
|
+
this.isDragging = false;
|
|
2786
|
+
if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
|
|
2787
|
+
const files = Array.from(event.dataTransfer.files).filter(file => file.type.startsWith('image/'));
|
|
2788
|
+
if (files.length > 0) {
|
|
2789
|
+
files.forEach(file => {
|
|
2790
|
+
const preview = URL.createObjectURL(file);
|
|
2791
|
+
this.selectedFiles.push({ file, preview });
|
|
2792
|
+
});
|
|
2793
|
+
this.cdr.detectChanges();
|
|
2794
|
+
}
|
|
2795
|
+
}
|
|
2796
|
+
}
|
|
2797
|
+
removeFile(index) {
|
|
2798
|
+
// Revoke object URL to free memory
|
|
2799
|
+
URL.revokeObjectURL(this.selectedFiles[index].preview);
|
|
2800
|
+
this.selectedFiles.splice(index, 1);
|
|
2801
|
+
this.cdr.detectChanges();
|
|
2802
|
+
}
|
|
2803
|
+
triggerFileInput() {
|
|
2804
|
+
this.fileInput?.nativeElement.click();
|
|
2805
|
+
}
|
|
2806
|
+
updateImageSize(imageId, dimension, value) {
|
|
2807
|
+
const image = this.insertedImages.find(img => img.id === imageId);
|
|
2808
|
+
if (image) {
|
|
2809
|
+
if (dimension === 'width') {
|
|
2810
|
+
image.width = value;
|
|
2811
|
+
}
|
|
2812
|
+
else {
|
|
2813
|
+
image.height = value;
|
|
2814
|
+
}
|
|
2815
|
+
this.emitTextChange();
|
|
2816
|
+
this.cdr.detectChanges();
|
|
2817
|
+
}
|
|
2818
|
+
}
|
|
2819
|
+
removeInsertedImage(imageId) {
|
|
2820
|
+
const index = this.insertedImages.findIndex(img => img.id === imageId);
|
|
2821
|
+
if (index !== -1) {
|
|
2822
|
+
// Remove from array
|
|
2823
|
+
URL.revokeObjectURL(this.insertedImages[index].url);
|
|
2824
|
+
this.insertedImages.splice(index, 1);
|
|
2825
|
+
// Remove from textarea text
|
|
2826
|
+
const pattern = `[IMAGE:${imageId}]\n`;
|
|
2827
|
+
this.textValue = this.textValue.replace(pattern, '');
|
|
2828
|
+
this.emitTextChange();
|
|
2829
|
+
this.cdr.detectChanges();
|
|
2830
|
+
}
|
|
2831
|
+
}
|
|
2832
|
+
toggleResizeControls(imageId) {
|
|
2833
|
+
this.resizingImageId = this.resizingImageId === imageId ? null : imageId;
|
|
2834
|
+
this.cdr.detectChanges();
|
|
2835
|
+
}
|
|
2836
|
+
startResize(event, imageId, direction) {
|
|
2837
|
+
event.preventDefault();
|
|
2838
|
+
event.stopPropagation();
|
|
2839
|
+
const image = this.insertedImages.find(img => img.id === imageId);
|
|
2840
|
+
if (!image)
|
|
2841
|
+
return;
|
|
2842
|
+
this.isResizing = true;
|
|
2843
|
+
this.resizeDirection = direction;
|
|
2844
|
+
this.resizingImageId = imageId;
|
|
2845
|
+
this.resizeStartX = event.clientX;
|
|
2846
|
+
this.resizeStartY = event.clientY;
|
|
2847
|
+
this.resizeStartWidth = image.width;
|
|
2848
|
+
this.resizeStartHeight = image.height;
|
|
2849
|
+
document.addEventListener('mousemove', this.onMouseMove);
|
|
2850
|
+
document.addEventListener('mouseup', this.onMouseUp);
|
|
2851
|
+
}
|
|
2852
|
+
onMouseMove = (event) => {
|
|
2853
|
+
if (!this.isResizing || !this.resizingImageId)
|
|
2854
|
+
return;
|
|
2855
|
+
const image = this.insertedImages.find(img => img.id === this.resizingImageId);
|
|
2856
|
+
if (!image)
|
|
2857
|
+
return;
|
|
2858
|
+
const deltaX = event.clientX - this.resizeStartX;
|
|
2859
|
+
const deltaY = event.clientY - this.resizeStartY;
|
|
2860
|
+
switch (this.resizeDirection) {
|
|
2861
|
+
case 'se': // bottom-right
|
|
2862
|
+
image.width = Math.max(50, this.resizeStartWidth + deltaX);
|
|
2863
|
+
image.height = Math.max(50, this.resizeStartHeight + deltaY);
|
|
2864
|
+
break;
|
|
2865
|
+
case 'sw': // bottom-left
|
|
2866
|
+
image.width = Math.max(50, this.resizeStartWidth - deltaX);
|
|
2867
|
+
image.height = Math.max(50, this.resizeStartHeight + deltaY);
|
|
2868
|
+
break;
|
|
2869
|
+
case 'ne': // top-right
|
|
2870
|
+
image.width = Math.max(50, this.resizeStartWidth + deltaX);
|
|
2871
|
+
image.height = Math.max(50, this.resizeStartHeight - deltaY);
|
|
2872
|
+
break;
|
|
2873
|
+
case 'nw': // top-left
|
|
2874
|
+
image.width = Math.max(50, this.resizeStartWidth - deltaX);
|
|
2875
|
+
image.height = Math.max(50, this.resizeStartHeight - deltaY);
|
|
2876
|
+
break;
|
|
2877
|
+
case 'e': // right
|
|
2878
|
+
image.width = Math.max(50, this.resizeStartWidth + deltaX);
|
|
2879
|
+
break;
|
|
2880
|
+
case 'w': // left
|
|
2881
|
+
image.width = Math.max(50, this.resizeStartWidth - deltaX);
|
|
2882
|
+
break;
|
|
2883
|
+
case 'n': // top
|
|
2884
|
+
image.height = Math.max(50, this.resizeStartHeight - deltaY);
|
|
2885
|
+
break;
|
|
2886
|
+
case 's': // bottom
|
|
2887
|
+
image.height = Math.max(50, this.resizeStartHeight + deltaY);
|
|
2888
|
+
break;
|
|
2889
|
+
}
|
|
2890
|
+
this.cdr.detectChanges();
|
|
2891
|
+
};
|
|
2892
|
+
onMouseUp = () => {
|
|
2893
|
+
if (this.isResizing) {
|
|
2894
|
+
this.emitTextChange();
|
|
2895
|
+
}
|
|
2896
|
+
this.isResizing = false;
|
|
2897
|
+
this.resizeDirection = '';
|
|
2898
|
+
document.removeEventListener('mousemove', this.onMouseMove);
|
|
2899
|
+
document.removeEventListener('mouseup', this.onMouseUp);
|
|
2900
|
+
};
|
|
2901
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTextArea, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2902
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTextArea, isStandalone: true, selector: "ms-text-area", inputs: { id: "id", name: "name", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", disabled: "disabled", required: "required", loading: "loading", invalid: "invalid", skeleton: "skeleton", minlength: "minlength", maxlength: "maxlength", ms_rows: "ms_rows", ms_cols: "ms_cols", autoResize: "autoResize", resize: "resize", scrollable: "scrollable", showResizeIcon: "showResizeIcon", state: "state", isDisabled: "isDisabled", showFormatOptions: "showFormatOptions", maxWidth: "maxWidth", maxHeight: "maxHeight" }, outputs: { valueChange: "valueChange", textChange: "textChange", imageChange: "imageChange", change: "change", focus: "focus", blur: "blur" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
2601
2903
|
{
|
|
2602
2904
|
provide: NG_VALUE_ACCESSOR,
|
|
2603
2905
|
useExisting: forwardRef(() => MsTextArea),
|
|
2604
2906
|
multi: true,
|
|
2605
2907
|
},
|
|
2606
|
-
], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(!showFormatOptions){\n <textarea\n class=\"ms-textArea\"\n [class.ms-error]=\"hasError()\"\n [class.invalid]=\"invalid\"\n [class]=\"state\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [rows]=\"ms_rows\"\n [cols]=\"ms_cols\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur($event)\"\n [style.resize]=\"showResizeIcon ? 'vertical' : 'none'\"\n [style.overflowY]=\"scrollable ? 'auto' : 'hidden'\"\n \n ></textarea>\n }@else if(showFormatOptions){\n <div class=\"ms-position-relative textarea-container\" [class]=\"state\">\n <div class=\"formatting-toolbar ms-position-absolute ms-d-flex ms-gap-2 ms-align-items-center ms-border\" style=\"background-color: #f9fafb; border-start-start-radius: 20px;\n border-start-end-radius: 20px;\" >\n <!-- Paragraph Type Dropdown -->\n \n <ms-dropdown [items]=\"paraTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Paragraph'\" [closeOnClickOutside]=\"true\" [showFlagImage]=\"false\" [searchable]=\"false\" (selectionChange)=\"onSelectPara($event)\"></ms-dropdown>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Bold Button -->\n <ms-button\n (click)=\"toggleBold()\"\n [class.active]=\"isBold\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Bold\">\n B\n </ms-button>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Italic Button -->\n <ms-button\n (click)=\"toggleItalic()\"\n [class.active]=\"isItalic\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Italic\">\n I\n </ms-button>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Underline Button -->\n <ms-button\n (click)=\"toggleUnderline()\"\n [class.active]=\"isUnderline\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Underline\">\n U\n </ms-button>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Text Alignment Dropdown -->\n <ms-dropdown [items]=\"formattingItems\" [showFlagImage]=\"false\" [searchable]=\"false\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Left align'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectItem($event)\"></ms-dropdown>\n \n <div class=\"formatting-divider\"></div>\n \n <ms-dropdown [items]=\"listTypeItems\" [showFlagImage]=\"false\" [searchable]=\"false\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Bulleted List'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectlistType($event)\"></ms-dropdown>\n \n <div class=\"formatting-divider\"></div>\n <!-- Link Button -->\n <div class=\"ms-position-relative\">\n <ms-button\n (click)=\"toggleLinkDropdown()\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Link\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"></path>\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"></path>\n </svg>\n </ms-button>\n \n <!-- Link Dropdown -->\n <div *ngIf=\"showLinkDropdown\" class=\"insertion-dropdown link-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Link Text:</label>\n <input type=\"text\" [(ngModel)]=\"linkText\" placeholder=\"Enter link text\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>URL:</label>\n <input type=\"text\" [(ngModel)]=\"linkUrl\" placeholder=\"https://example.com\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertLink()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeLinkDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n \n <!-- Image Button -->\n <div class=\"ms-position-relative\">\n <ms-button\n (click)=\"toggleImageDropdown()\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Image\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n <polyline points=\"21 15 16 10 5 21\"></polyline>\n </svg>\n </ms-button>\n \n <!-- Image Dropdown -->\n <div *ngIf=\"showImageDropdown\" class=\"insertion-dropdown image-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Image URL:</label>\n <input type=\"text\" [(ngModel)]=\"imageUrl\" placeholder=\"https://example.com/image.jpg\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>Alt Text:</label>\n <input type=\"text\" [(ngModel)]=\"imageAlt\" placeholder=\"Image description\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertImage()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeImageDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n </div>\n <textarea\n #textArea\n placeholder=\"Enter name\"\n [(ngModel)]=\"textValue\"\n [attr.rows]=\"ms_rows\"\n [attr.cols]=\"ms_cols\"\n [attr.maxlength]=\"maxlength\"\n [attr.readonly]=\"readonly ? true : null\"\n [attr.disabled]=\"disabled ? true : null\"\n [style.resize]=\"autoResize ? 'both' : 'none'\"\n [style.overflow]=\"scrollable ? 'auto' : 'hidden'\"\n [style.textAlign]=\"textAlignment\"\n [style.fontSize]=\"fontSize\"\n [style.fontWeight]=\"isBold ? 'bold' : fontWeight\"\n [style.fontStyle]=\"isItalic ? 'italic' : 'normal'\"\n [style.textDecoration]=\"isUnderline ? 'underline' : 'none'\"\n [style.paddingLeft]=\"listType !== 'none' ? '32px' : '12px'\"\n [ngClass]=\"'list-' + listType\" (keydown.enter)=\"handleEnter($event)\"\n class=\"ms-textArea\"\n [ngStyle]=\"{\n 'max-width': maxWidth ? maxWidth + 'px' : 'auto',\n 'max-height': maxHeight ? maxHeight + 'px' : 'auto',\n 'padding-top': showFormatOptions ? '55px' : '',\n 'border-radius': '20px', 'overflowY': 'auto'\n }\"></textarea>\n</div>\n }\n \n</ng-container>\n \n<ng-template #skeleton>\n <div class=\"ms-skeleton-text\"></div>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: MsButton, selector: "ms-button", inputs: ["type", "variant", "size", "block", "disabled", "isBorder", "textSrc", "icon", "iconPosition", "iconOnly", "class", "buttonType"], outputs: ["htmlChange", "click"] }, { kind: "component", type: MsDropdown, selector: "ms-dropdown", inputs: ["text", "isDisabled", "items", "icon", "iconPosition", "closeOnSelect", "closeOnClickOutside", "selectedItem", "allowMultiple", "maxHeight", "loading", "error", "ariaLabel", "searchable", "searchPlaceholder", "noResultsText", "customClass", "dropdownMenuClass", "dropdownMenuWidth", "showFlagImage", "multiSelectDisplay", "inputPlaceholder", "inputLabel", "inputErrorState", "inputWarningState", "inputFocusState", "required", "size", "variant", "radiussize", "iconOnly", "useInputField", "state"], outputs: ["selectionChange"] }] });
|
|
2908
|
+
], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(!showFormatOptions){\n <textarea\n class=\"ms-textArea\"\n [class.ms-error]=\"hasError()\"\n [class.invalid]=\"invalid\"\n [class]=\"state\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [rows]=\"ms_rows\"\n [cols]=\"ms_cols\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur($event)\"\n [style.resize]=\"showResizeIcon ? 'vertical' : 'none'\"\n [style.overflowY]=\"scrollable ? 'auto' : 'hidden'\"\n \n ></textarea>\n }@else if(showFormatOptions){\n <div class=\"ms-position-relative textarea-container\" [class]=\"state\">\n <div class=\"formatting-toolbar ms-position-absolute ms-d-flex ms-gap-2 ms-align-items-center ms-border\" style=\"background-color: #f9fafb; border-start-start-radius: 20px;\n border-start-end-radius: 20px;padding: 0 12px;\" >\n <div class=\"ms-position-relative\">\n <span class=\"ms-d-flex ms-align-items-center\" style=\"cursor: pointer;\" (click)=\"toggleAiDropdown()\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/sparkles.svg'\"></span>\n \n <!-- AI Content Generation Dropdown -->\n <div *ngIf=\"showAiDropdown\" class=\"insertion-dropdown ai-dropdown\">\n <div class=\"ai-header\">Generate AI Content</div>\n <div class=\"dropdown-form-group\">\n <textarea \n [(ngModel)]=\"aiPrompt\" \n placeholder=\"Give a description of the content you'd like to generate\"\n rows=\"4\"\n class=\"ai-prompt-input\"></textarea>\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"closeAiDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n <ms-button \n (click)=\"generateAiContent()\" \n [disabled]=\"isGenerating\"\n class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">\n {{ isGenerating ? 'Generating...' : 'Generate' }}\n </ms-button>\n </div>\n </div>\n </div>\n <div class=\"formatting-divider\"></div>\n <!-- Paragraph Type Dropdown -->\n <ms-dropdown [items]=\"paraTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Paragraph'\" [closeOnClickOutside]=\"true\" [showFlagImage]=\"false\" [searchable]=\"false\" (selectionChange)=\"onSelectPara($event)\"></ms-dropdown>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Bold Button -->\n <ms-button\n (click)=\"toggleBold()\"\n [class.active]=\"isBold\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Bold\">\n B\n </ms-button>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Italic Button -->\n <ms-button\n (click)=\"toggleItalic()\"\n [class.active]=\"isItalic\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Italic\">\n I\n </ms-button>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Underline Button -->\n <ms-button\n (click)=\"toggleUnderline()\"\n [class.active]=\"isUnderline\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Underline\">\n U\n </ms-button>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Text Alignment Dropdown -->\n <ms-dropdown [items]=\"formattingItems\" [showFlagImage]=\"false\" [searchable]=\"false\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Left align'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectItem($event)\"></ms-dropdown>\n \n <div class=\"formatting-divider\"></div>\n \n <ms-dropdown [items]=\"listTypeItems\" [showFlagImage]=\"false\" [searchable]=\"false\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Bulleted List'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectlistType($event)\"></ms-dropdown>\n \n <div class=\"formatting-divider\"></div>\n <!-- Link Button -->\n <div class=\"ms-position-relative\">\n <ms-button\n (click)=\"toggleLinkDropdown()\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Link\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"></path>\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"></path>\n </svg>\n </ms-button>\n \n <!-- Link Dropdown -->\n <div *ngIf=\"showLinkDropdown\" class=\"insertion-dropdown link-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Link Text:</label>\n <input type=\"text\" [(ngModel)]=\"linkText\" placeholder=\"Enter link text\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>URL:</label>\n <input type=\"text\" [(ngModel)]=\"linkUrl\" placeholder=\"https://example.com\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertLink()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeLinkDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n \n <!-- Image Button -->\n <div class=\"ms-position-relative\">\n <ms-button\n (click)=\"toggleImageDropdown()\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Image\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n <polyline points=\"21 15 16 10 5 21\"></polyline>\n </svg>\n </ms-button>\n \n <!-- Image Dropdown -->\n <div *ngIf=\"showImageDropdown\" class=\"insertion-dropdown image-dropdown\">\n \n <!-- Compact view when files selected -->\n <div *ngIf=\"selectedFiles.length > 0\" class=\"compact-image-section\">\n <div class=\"thumbnail-row\">\n <!-- Upload Box -->\n <div class=\"upload-thumbnail-box\" (click)=\"triggerFileInput()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#666\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"17 8 12 3 7 8\"></polyline>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\n </svg>\n </div>\n \n <!-- Selected Images Thumbnails -->\n <div class=\"compact-thumbnail\" *ngFor=\"let item of selectedFiles; let i = index\">\n <img [src]=\"item.preview\" alt=\"preview\" />\n <button class=\"compact-remove\" (click)=\"removeFile(i)\" type=\"button\">\u00D7</button>\n </div>\n </div>\n \n <input \n #fileInput\n type=\"file\" \n accept=\"image/*\" \n multiple \n style=\"display: none;\" \n (change)=\"onFileSelect($event)\" />\n \n <div class=\"dropdown-buttons\" style=\"margin-top: 8px;\">\n <ms-button (click)=\"insertImage()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeImageDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n \n <!-- Initial drag-drop view (no files selected) -->\n <div *ngIf=\"selectedFiles.length === 0\">\n <!-- Drag and Drop Area -->\n <div \n class=\"drag-drop-area\" \n [class.dragging]=\"isDragging\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"triggerFileInput()\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#666\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"17 8 12 3 7 8\"></polyline>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\n </svg>\n <p>Drag & drop images here or click to browse</p>\n <p style=\"font-size: 12px; color: #999;\">Support multiple images</p>\n <input \n #fileInput\n type=\"file\" \n accept=\"image/*\" \n multiple \n style=\"display: none;\" \n (change)=\"onFileSelect($event)\" />\n </div>\n \n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"closeImageDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <textarea\n #textArea\n placeholder=\"Enter name\"\n [(ngModel)]=\"textValue\"\n [attr.rows]=\"ms_rows\"\n [attr.cols]=\"ms_cols\"\n [attr.maxlength]=\"maxlength\"\n [attr.readonly]=\"readonly ? true : null\"\n [attr.disabled]=\"disabled ? true : null\"\n [style.resize]=\"autoResize ? 'both' : 'none'\"\n [style.overflow]=\"scrollable ? 'auto' : 'hidden'\"\n [style.textAlign]=\"textAlignment\"\n [style.fontSize]=\"fontSize\"\n [style.fontWeight]=\"isBold ? 'bold' : fontWeight\"\n [style.fontStyle]=\"isItalic ? 'italic' : 'normal'\"\n [style.textDecoration]=\"isUnderline ? 'underline' : 'none'\"\n [style.paddingLeft]=\"listType !== 'none' ? '32px' : '12px'\"\n [ngClass]=\"'list-' + listType\" (keydown.enter)=\"handleEnter($event)\"\n class=\"ms-textArea\"\n [ngStyle]=\"{\n 'max-width': maxWidth ? maxWidth + 'px' : 'auto',\n 'max-height': maxHeight ? maxHeight + 'px' : 'auto',\n 'padding-top': showFormatOptions ? '55px' : '',\n 'border-radius': '20px', 'overflowY': 'auto'\n }\"></textarea>\n \n <!-- Inserted Images Gallery -->\n <div *ngIf=\"insertedImages.length > 0\" class=\"inserted-images-gallery\">\n <div class=\"gallery-label\">Inserted Images:</div>\n <div class=\"gallery-grid\">\n <div class=\"gallery-item\" *ngFor=\"let img of insertedImages; let i = index\" \n [style.width.px]=\"img.width\" \n [style.height.px]=\"img.height\">\n <img [src]=\"img.url\" [alt]=\"'Image ' + (i + 1)\" class=\"gallery-thumbnail\" \n [style.width.px]=\"img.width\" \n [style.height.px]=\"img.height\" />\n \n <!-- Four Corner Resize Handles -->\n <div class=\"resize-handle nw\" (mousedown)=\"startResize($event, img.id, 'nw')\" title=\"Resize\"></div>\n <div class=\"resize-handle ne\" (mousedown)=\"startResize($event, img.id, 'ne')\" title=\"Resize\"></div>\n <div class=\"resize-handle sw\" (mousedown)=\"startResize($event, img.id, 'sw')\" title=\"Resize\"></div>\n <div class=\"resize-handle se\" (mousedown)=\"startResize($event, img.id, 'se')\" title=\"Resize\"></div>\n \n <!-- Four Side Resize Handles -->\n <div class=\"resize-handle n\" (mousedown)=\"startResize($event, img.id, 'n')\" title=\"Resize\"></div>\n <div class=\"resize-handle s\" (mousedown)=\"startResize($event, img.id, 's')\" title=\"Resize\"></div>\n <div class=\"resize-handle e\" (mousedown)=\"startResize($event, img.id, 'e')\" title=\"Resize\"></div>\n <div class=\"resize-handle w\" (mousedown)=\"startResize($event, img.id, 'w')\" title=\"Resize\"></div>\n \n <!-- Remove Button -->\n <button class=\"remove-gallery-btn\" (click)=\"removeInsertedImage(img.id)\" type=\"button\" title=\"Remove\">\u00D7</button>\n \n <div class=\"gallery-overlay\">\n <span class=\"image-id\">{{ img.id }}</span>\n <span class=\"image-size\">{{ img.width }}\u00D7{{ img.height }}</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n }\n \n</ng-container>\n \n<ng-template #skeleton>\n <div class=\"ms-skeleton-text\"></div>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsButton, selector: "ms-button", inputs: ["type", "variant", "size", "block", "disabled", "isBorder", "textSrc", "icon", "iconPosition", "iconOnly", "class", "buttonType"], outputs: ["htmlChange", "click"] }, { kind: "component", type: MsDropdown, selector: "ms-dropdown", inputs: ["text", "isDisabled", "items", "icon", "iconPosition", "closeOnSelect", "closeOnClickOutside", "selectedItem", "allowMultiple", "maxHeight", "loading", "error", "ariaLabel", "searchable", "searchPlaceholder", "noResultsText", "customClass", "dropdownMenuClass", "dropdownMenuWidth", "showFlagImage", "multiSelectDisplay", "inputPlaceholder", "inputLabel", "inputErrorState", "inputWarningState", "inputFocusState", "required", "size", "variant", "radiussize", "iconOnly", "useInputField", "state"], outputs: ["selectionChange"] }] });
|
|
2607
2909
|
}
|
|
2608
2910
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTextArea, decorators: [{
|
|
2609
2911
|
type: Component,
|
|
2610
|
-
args: [{ selector: 'ms-text-area', imports: [CommonModule, FormsModule, InlineSVGModule, MsButton, MsDropdown], providers: [
|
|
2912
|
+
args: [{ selector: 'ms-text-area', imports: [CommonModule, FormsModule, InlineSVGModule, MsButton, MsDropdown, MsIcon], providers: [
|
|
2611
2913
|
{
|
|
2612
2914
|
provide: NG_VALUE_ACCESSOR,
|
|
2613
2915
|
useExisting: forwardRef(() => MsTextArea),
|
|
2614
2916
|
multi: true,
|
|
2615
2917
|
},
|
|
2616
|
-
], template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(!showFormatOptions){\n <textarea\n class=\"ms-textArea\"\n [class.ms-error]=\"hasError()\"\n [class.invalid]=\"invalid\"\n [class]=\"state\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [rows]=\"ms_rows\"\n [cols]=\"ms_cols\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur($event)\"\n [style.resize]=\"showResizeIcon ? 'vertical' : 'none'\"\n [style.overflowY]=\"scrollable ? 'auto' : 'hidden'\"\n \n ></textarea>\n }@else if(showFormatOptions){\n <div class=\"ms-position-relative textarea-container\" [class]=\"state\">\n <div class=\"formatting-toolbar ms-position-absolute ms-d-flex ms-gap-2 ms-align-items-center ms-border\" style=\"background-color: #f9fafb; border-start-start-radius: 20px;\n border-start-end-radius: 20px;\" >\n <!-- Paragraph Type Dropdown -->\n \n <ms-dropdown [items]=\"paraTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Paragraph'\" [closeOnClickOutside]=\"true\" [showFlagImage]=\"false\" [searchable]=\"false\" (selectionChange)=\"onSelectPara($event)\"></ms-dropdown>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Bold Button -->\n <ms-button\n (click)=\"toggleBold()\"\n [class.active]=\"isBold\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Bold\">\n B\n </ms-button>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Italic Button -->\n <ms-button\n (click)=\"toggleItalic()\"\n [class.active]=\"isItalic\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Italic\">\n I\n </ms-button>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Underline Button -->\n <ms-button\n (click)=\"toggleUnderline()\"\n [class.active]=\"isUnderline\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Underline\">\n U\n </ms-button>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Text Alignment Dropdown -->\n <ms-dropdown [items]=\"formattingItems\" [showFlagImage]=\"false\" [searchable]=\"false\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Left align'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectItem($event)\"></ms-dropdown>\n \n <div class=\"formatting-divider\"></div>\n \n <ms-dropdown [items]=\"listTypeItems\" [showFlagImage]=\"false\" [searchable]=\"false\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Bulleted List'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectlistType($event)\"></ms-dropdown>\n \n <div class=\"formatting-divider\"></div>\n <!-- Link Button -->\n <div class=\"ms-position-relative\">\n <ms-button\n (click)=\"toggleLinkDropdown()\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Link\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"></path>\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"></path>\n </svg>\n </ms-button>\n \n <!-- Link Dropdown -->\n <div *ngIf=\"showLinkDropdown\" class=\"insertion-dropdown link-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Link Text:</label>\n <input type=\"text\" [(ngModel)]=\"linkText\" placeholder=\"Enter link text\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>URL:</label>\n <input type=\"text\" [(ngModel)]=\"linkUrl\" placeholder=\"https://example.com\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertLink()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeLinkDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n \n <!-- Image Button -->\n <div class=\"ms-position-relative\">\n <ms-button\n (click)=\"toggleImageDropdown()\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Image\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n <polyline points=\"21 15 16 10 5 21\"></polyline>\n </svg>\n </ms-button>\n \n <!-- Image Dropdown -->\n <div *ngIf=\"showImageDropdown\" class=\"insertion-dropdown image-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Image URL:</label>\n <input type=\"text\" [(ngModel)]=\"imageUrl\" placeholder=\"https://example.com/image.jpg\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>Alt Text:</label>\n <input type=\"text\" [(ngModel)]=\"imageAlt\" placeholder=\"Image description\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertImage()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeImageDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n </div>\n <textarea\n #textArea\n placeholder=\"Enter name\"\n [(ngModel)]=\"textValue\"\n [attr.rows]=\"ms_rows\"\n [attr.cols]=\"ms_cols\"\n [attr.maxlength]=\"maxlength\"\n [attr.readonly]=\"readonly ? true : null\"\n [attr.disabled]=\"disabled ? true : null\"\n [style.resize]=\"autoResize ? 'both' : 'none'\"\n [style.overflow]=\"scrollable ? 'auto' : 'hidden'\"\n [style.textAlign]=\"textAlignment\"\n [style.fontSize]=\"fontSize\"\n [style.fontWeight]=\"isBold ? 'bold' : fontWeight\"\n [style.fontStyle]=\"isItalic ? 'italic' : 'normal'\"\n [style.textDecoration]=\"isUnderline ? 'underline' : 'none'\"\n [style.paddingLeft]=\"listType !== 'none' ? '32px' : '12px'\"\n [ngClass]=\"'list-' + listType\" (keydown.enter)=\"handleEnter($event)\"\n class=\"ms-textArea\"\n [ngStyle]=\"{\n 'max-width': maxWidth ? maxWidth + 'px' : 'auto',\n 'max-height': maxHeight ? maxHeight + 'px' : 'auto',\n 'padding-top': showFormatOptions ? '55px' : '',\n 'border-radius': '20px', 'overflowY': 'auto'\n }\"></textarea>\n</div>\n }\n \n</ng-container>\n \n<ng-template #skeleton>\n <div class=\"ms-skeleton-text\"></div>\n</ng-template>" }]
|
|
2617
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
|
|
2918
|
+
], template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(!showFormatOptions){\n <textarea\n class=\"ms-textArea\"\n [class.ms-error]=\"hasError()\"\n [class.invalid]=\"invalid\"\n [class]=\"state\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [rows]=\"ms_rows\"\n [cols]=\"ms_cols\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur($event)\"\n [style.resize]=\"showResizeIcon ? 'vertical' : 'none'\"\n [style.overflowY]=\"scrollable ? 'auto' : 'hidden'\"\n \n ></textarea>\n }@else if(showFormatOptions){\n <div class=\"ms-position-relative textarea-container\" [class]=\"state\">\n <div class=\"formatting-toolbar ms-position-absolute ms-d-flex ms-gap-2 ms-align-items-center ms-border\" style=\"background-color: #f9fafb; border-start-start-radius: 20px;\n border-start-end-radius: 20px;padding: 0 12px;\" >\n <div class=\"ms-position-relative\">\n <span class=\"ms-d-flex ms-align-items-center\" style=\"cursor: pointer;\" (click)=\"toggleAiDropdown()\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/sparkles.svg'\"></span>\n \n <!-- AI Content Generation Dropdown -->\n <div *ngIf=\"showAiDropdown\" class=\"insertion-dropdown ai-dropdown\">\n <div class=\"ai-header\">Generate AI Content</div>\n <div class=\"dropdown-form-group\">\n <textarea \n [(ngModel)]=\"aiPrompt\" \n placeholder=\"Give a description of the content you'd like to generate\"\n rows=\"4\"\n class=\"ai-prompt-input\"></textarea>\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"closeAiDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n <ms-button \n (click)=\"generateAiContent()\" \n [disabled]=\"isGenerating\"\n class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">\n {{ isGenerating ? 'Generating...' : 'Generate' }}\n </ms-button>\n </div>\n </div>\n </div>\n <div class=\"formatting-divider\"></div>\n <!-- Paragraph Type Dropdown -->\n <ms-dropdown [items]=\"paraTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Paragraph'\" [closeOnClickOutside]=\"true\" [showFlagImage]=\"false\" [searchable]=\"false\" (selectionChange)=\"onSelectPara($event)\"></ms-dropdown>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Bold Button -->\n <ms-button\n (click)=\"toggleBold()\"\n [class.active]=\"isBold\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Bold\">\n B\n </ms-button>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Italic Button -->\n <ms-button\n (click)=\"toggleItalic()\"\n [class.active]=\"isItalic\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Italic\">\n I\n </ms-button>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Underline Button -->\n <ms-button\n (click)=\"toggleUnderline()\"\n [class.active]=\"isUnderline\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Underline\">\n U\n </ms-button>\n \n <div class=\"formatting-divider\"></div>\n \n <!-- Text Alignment Dropdown -->\n <ms-dropdown [items]=\"formattingItems\" [showFlagImage]=\"false\" [searchable]=\"false\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Left align'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectItem($event)\"></ms-dropdown>\n \n <div class=\"formatting-divider\"></div>\n \n <ms-dropdown [items]=\"listTypeItems\" [showFlagImage]=\"false\" [searchable]=\"false\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Bulleted List'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectlistType($event)\"></ms-dropdown>\n \n <div class=\"formatting-divider\"></div>\n <!-- Link Button -->\n <div class=\"ms-position-relative\">\n <ms-button\n (click)=\"toggleLinkDropdown()\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Link\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"></path>\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"></path>\n </svg>\n </ms-button>\n \n <!-- Link Dropdown -->\n <div *ngIf=\"showLinkDropdown\" class=\"insertion-dropdown link-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Link Text:</label>\n <input type=\"text\" [(ngModel)]=\"linkText\" placeholder=\"Enter link text\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>URL:</label>\n <input type=\"text\" [(ngModel)]=\"linkUrl\" placeholder=\"https://example.com\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertLink()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeLinkDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n \n <!-- Image Button -->\n <div class=\"ms-position-relative\">\n <ms-button\n (click)=\"toggleImageDropdown()\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Image\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n <polyline points=\"21 15 16 10 5 21\"></polyline>\n </svg>\n </ms-button>\n \n <!-- Image Dropdown -->\n <div *ngIf=\"showImageDropdown\" class=\"insertion-dropdown image-dropdown\">\n \n <!-- Compact view when files selected -->\n <div *ngIf=\"selectedFiles.length > 0\" class=\"compact-image-section\">\n <div class=\"thumbnail-row\">\n <!-- Upload Box -->\n <div class=\"upload-thumbnail-box\" (click)=\"triggerFileInput()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#666\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"17 8 12 3 7 8\"></polyline>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\n </svg>\n </div>\n \n <!-- Selected Images Thumbnails -->\n <div class=\"compact-thumbnail\" *ngFor=\"let item of selectedFiles; let i = index\">\n <img [src]=\"item.preview\" alt=\"preview\" />\n <button class=\"compact-remove\" (click)=\"removeFile(i)\" type=\"button\">\u00D7</button>\n </div>\n </div>\n \n <input \n #fileInput\n type=\"file\" \n accept=\"image/*\" \n multiple \n style=\"display: none;\" \n (change)=\"onFileSelect($event)\" />\n \n <div class=\"dropdown-buttons\" style=\"margin-top: 8px;\">\n <ms-button (click)=\"insertImage()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeImageDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n \n <!-- Initial drag-drop view (no files selected) -->\n <div *ngIf=\"selectedFiles.length === 0\">\n <!-- Drag and Drop Area -->\n <div \n class=\"drag-drop-area\" \n [class.dragging]=\"isDragging\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"triggerFileInput()\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#666\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"17 8 12 3 7 8\"></polyline>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\n </svg>\n <p>Drag & drop images here or click to browse</p>\n <p style=\"font-size: 12px; color: #999;\">Support multiple images</p>\n <input \n #fileInput\n type=\"file\" \n accept=\"image/*\" \n multiple \n style=\"display: none;\" \n (change)=\"onFileSelect($event)\" />\n </div>\n \n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"closeImageDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <textarea\n #textArea\n placeholder=\"Enter name\"\n [(ngModel)]=\"textValue\"\n [attr.rows]=\"ms_rows\"\n [attr.cols]=\"ms_cols\"\n [attr.maxlength]=\"maxlength\"\n [attr.readonly]=\"readonly ? true : null\"\n [attr.disabled]=\"disabled ? true : null\"\n [style.resize]=\"autoResize ? 'both' : 'none'\"\n [style.overflow]=\"scrollable ? 'auto' : 'hidden'\"\n [style.textAlign]=\"textAlignment\"\n [style.fontSize]=\"fontSize\"\n [style.fontWeight]=\"isBold ? 'bold' : fontWeight\"\n [style.fontStyle]=\"isItalic ? 'italic' : 'normal'\"\n [style.textDecoration]=\"isUnderline ? 'underline' : 'none'\"\n [style.paddingLeft]=\"listType !== 'none' ? '32px' : '12px'\"\n [ngClass]=\"'list-' + listType\" (keydown.enter)=\"handleEnter($event)\"\n class=\"ms-textArea\"\n [ngStyle]=\"{\n 'max-width': maxWidth ? maxWidth + 'px' : 'auto',\n 'max-height': maxHeight ? maxHeight + 'px' : 'auto',\n 'padding-top': showFormatOptions ? '55px' : '',\n 'border-radius': '20px', 'overflowY': 'auto'\n }\"></textarea>\n \n <!-- Inserted Images Gallery -->\n <div *ngIf=\"insertedImages.length > 0\" class=\"inserted-images-gallery\">\n <div class=\"gallery-label\">Inserted Images:</div>\n <div class=\"gallery-grid\">\n <div class=\"gallery-item\" *ngFor=\"let img of insertedImages; let i = index\" \n [style.width.px]=\"img.width\" \n [style.height.px]=\"img.height\">\n <img [src]=\"img.url\" [alt]=\"'Image ' + (i + 1)\" class=\"gallery-thumbnail\" \n [style.width.px]=\"img.width\" \n [style.height.px]=\"img.height\" />\n \n <!-- Four Corner Resize Handles -->\n <div class=\"resize-handle nw\" (mousedown)=\"startResize($event, img.id, 'nw')\" title=\"Resize\"></div>\n <div class=\"resize-handle ne\" (mousedown)=\"startResize($event, img.id, 'ne')\" title=\"Resize\"></div>\n <div class=\"resize-handle sw\" (mousedown)=\"startResize($event, img.id, 'sw')\" title=\"Resize\"></div>\n <div class=\"resize-handle se\" (mousedown)=\"startResize($event, img.id, 'se')\" title=\"Resize\"></div>\n \n <!-- Four Side Resize Handles -->\n <div class=\"resize-handle n\" (mousedown)=\"startResize($event, img.id, 'n')\" title=\"Resize\"></div>\n <div class=\"resize-handle s\" (mousedown)=\"startResize($event, img.id, 's')\" title=\"Resize\"></div>\n <div class=\"resize-handle e\" (mousedown)=\"startResize($event, img.id, 'e')\" title=\"Resize\"></div>\n <div class=\"resize-handle w\" (mousedown)=\"startResize($event, img.id, 'w')\" title=\"Resize\"></div>\n \n <!-- Remove Button -->\n <button class=\"remove-gallery-btn\" (click)=\"removeInsertedImage(img.id)\" type=\"button\" title=\"Remove\">\u00D7</button>\n \n <div class=\"gallery-overlay\">\n <span class=\"image-id\">{{ img.id }}</span>\n <span class=\"image-size\">{{ img.width }}\u00D7{{ img.height }}</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n }\n \n</ng-container>\n \n<ng-template #skeleton>\n <div class=\"ms-skeleton-text\"></div>\n</ng-template>" }]
|
|
2919
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
|
|
2618
2920
|
type: Input
|
|
2619
2921
|
}], name: [{
|
|
2620
2922
|
type: Input
|
|
@@ -2663,6 +2965,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2663
2965
|
}], textArea: [{
|
|
2664
2966
|
type: ViewChild,
|
|
2665
2967
|
args: ['textArea']
|
|
2968
|
+
}], fileInput: [{
|
|
2969
|
+
type: ViewChild,
|
|
2970
|
+
args: ['fileInput']
|
|
2971
|
+
}], valueChange: [{
|
|
2972
|
+
type: Output
|
|
2973
|
+
}], textChange: [{
|
|
2974
|
+
type: Output
|
|
2975
|
+
}], imageChange: [{
|
|
2976
|
+
type: Output
|
|
2977
|
+
}], change: [{
|
|
2978
|
+
type: Output
|
|
2979
|
+
}], focus: [{
|
|
2980
|
+
type: Output
|
|
2981
|
+
}], blur: [{
|
|
2982
|
+
type: Output
|
|
2666
2983
|
}], onDocumentClick: [{
|
|
2667
2984
|
type: HostListener,
|
|
2668
2985
|
args: ['document:click', ['$event']]
|
|
@@ -2670,7 +2987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2670
2987
|
|
|
2671
2988
|
class MsTooltip {
|
|
2672
2989
|
text = '';
|
|
2673
|
-
position = '
|
|
2990
|
+
position = 'auto';
|
|
2674
2991
|
bgColor = '#0E0F10';
|
|
2675
2992
|
showArrow = true;
|
|
2676
2993
|
get title() {
|
|
@@ -2697,7 +3014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2697
3014
|
|
|
2698
3015
|
class MsTooltipDirective {
|
|
2699
3016
|
msTooltip;
|
|
2700
|
-
position = '
|
|
3017
|
+
position = 'auto';
|
|
2701
3018
|
bgColor = '#333';
|
|
2702
3019
|
showArrow = true;
|
|
2703
3020
|
tooltipRef;
|
|
@@ -2706,110 +3023,139 @@ class MsTooltipDirective {
|
|
|
2706
3023
|
// --------------------
|
|
2707
3024
|
// SHOW TOOLTIP
|
|
2708
3025
|
// --------------------
|
|
3026
|
+
// @HostListener('mouseenter')
|
|
3027
|
+
// onMouseEnter() {
|
|
3028
|
+
// // ❌ agar value hi nahi to tooltip mat banao
|
|
3029
|
+
// if (!this.msTooltip || !this.msTooltip.trim()) {
|
|
3030
|
+
// return;
|
|
3031
|
+
// }
|
|
3032
|
+
// this.tooltipRef = this.vcr.createComponent(MsTooltip);
|
|
3033
|
+
// const instance = this.tooltipRef.instance;
|
|
3034
|
+
// instance.text = this.msTooltip;
|
|
3035
|
+
// instance.position = this.position;
|
|
3036
|
+
// instance.bgColor = this.bgColor;
|
|
3037
|
+
// instance.showArrow = this.showArrow;
|
|
3038
|
+
// const rect = this.el.nativeElement.getBoundingClientRect();
|
|
3039
|
+
// const tooltipEl = this.tooltipRef.location.nativeElement as HTMLElement;
|
|
3040
|
+
// tooltipEl.style.position = 'absolute';
|
|
3041
|
+
// tooltipEl.style.zIndex = '1000';
|
|
3042
|
+
// tooltipEl.style.opacity = '0';
|
|
3043
|
+
// tooltipEl.style.pointerEvents = 'none';
|
|
3044
|
+
// document.body.appendChild(tooltipEl);
|
|
3045
|
+
// requestAnimationFrame(() => {
|
|
3046
|
+
// const tooltipRect = tooltipEl.getBoundingClientRect();
|
|
3047
|
+
// switch (this.position) {
|
|
3048
|
+
// case 'top':
|
|
3049
|
+
// tooltipEl.style.top = rect.top - tooltipRect.height - 8 + 'px';
|
|
3050
|
+
// tooltipEl.style.left = rect.left + rect.width / 2 - tooltipRect.width / 2 + 'px';
|
|
3051
|
+
// break;
|
|
3052
|
+
// case 'bottom':
|
|
3053
|
+
// tooltipEl.style.top = rect.bottom + 8 + 'px';
|
|
3054
|
+
// tooltipEl.style.left = rect.left + rect.width / 2 - tooltipRect.width / 2 + 'px';
|
|
3055
|
+
// break;
|
|
3056
|
+
// case 'left':
|
|
3057
|
+
// tooltipEl.style.top = rect.top + rect.height / 2 - tooltipRect.height / 2 + 'px';
|
|
3058
|
+
// tooltipEl.style.left = rect.left - tooltipRect.width - 8 + 'px';
|
|
3059
|
+
// break;
|
|
3060
|
+
// case 'right':
|
|
3061
|
+
// tooltipEl.style.top = rect.top + rect.height / 2 - tooltipRect.height / 2 + 'px';
|
|
3062
|
+
// tooltipEl.style.left = rect.right + 8 + 'px';
|
|
3063
|
+
// break;
|
|
3064
|
+
// case 'top-left':
|
|
3065
|
+
// tooltipEl.style.top = rect.top - tooltipRect.height - 8 + 'px';
|
|
3066
|
+
// tooltipEl.style.left = rect.left + 'px';
|
|
3067
|
+
// break;
|
|
3068
|
+
// case 'top-right':
|
|
3069
|
+
// tooltipEl.style.top = rect.top - tooltipRect.height - 8 + 'px';
|
|
3070
|
+
// tooltipEl.style.left = rect.right - tooltipRect.width + 'px';
|
|
3071
|
+
// break;
|
|
3072
|
+
// case 'bottom-left':
|
|
3073
|
+
// tooltipEl.style.top = rect.bottom + 8 + 'px';
|
|
3074
|
+
// tooltipEl.style.left = rect.left + 'px';
|
|
3075
|
+
// break;
|
|
3076
|
+
// case 'bottom-right':
|
|
3077
|
+
// tooltipEl.style.top = rect.bottom + 8 + 'px';
|
|
3078
|
+
// tooltipEl.style.left = rect.right - tooltipRect.width + 'px';
|
|
3079
|
+
// break;
|
|
3080
|
+
// }
|
|
3081
|
+
// });
|
|
3082
|
+
// }
|
|
2709
3083
|
onMouseEnter() {
|
|
2710
|
-
|
|
2711
|
-
if (!this.msTooltip || !this.msTooltip.trim()) {
|
|
3084
|
+
if (!this.msTooltip?.trim())
|
|
2712
3085
|
return;
|
|
2713
|
-
}
|
|
2714
3086
|
this.tooltipRef = this.vcr.createComponent(MsTooltip);
|
|
2715
3087
|
const instance = this.tooltipRef.instance;
|
|
2716
3088
|
instance.text = this.msTooltip;
|
|
2717
|
-
instance.position = this.position;
|
|
2718
3089
|
instance.bgColor = this.bgColor;
|
|
2719
3090
|
instance.showArrow = this.showArrow;
|
|
2720
|
-
const rect = this.el.nativeElement.getBoundingClientRect();
|
|
2721
3091
|
const tooltipEl = this.tooltipRef.location.nativeElement;
|
|
2722
|
-
tooltipEl.style.position = 'absolute';
|
|
3092
|
+
tooltipEl.style.position = 'absolute'; // ❗ important
|
|
3093
|
+
tooltipEl.style.visibility = 'hidden';
|
|
2723
3094
|
tooltipEl.style.zIndex = '1000';
|
|
2724
|
-
tooltipEl.style.opacity = '0';
|
|
2725
|
-
tooltipEl.style.pointerEvents = 'none';
|
|
2726
3095
|
document.body.appendChild(tooltipEl);
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
|
|
2732
|
-
|
|
2733
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
2736
|
-
top = rect.top + scrollY - tRect.height - gap;
|
|
2737
|
-
left = rect.left + scrollX + (rect.width - tRect.width) / 2;
|
|
2738
|
-
break;
|
|
2739
|
-
case 'bottom':
|
|
2740
|
-
top = rect.bottom + scrollY + gap;
|
|
2741
|
-
left = rect.left + scrollX + (rect.width - tRect.width) / 2;
|
|
2742
|
-
break;
|
|
2743
|
-
case 'left':
|
|
2744
|
-
top = rect.top + scrollY + (rect.height - tRect.height) / 2;
|
|
2745
|
-
left = rect.left + scrollX - tRect.width - gap;
|
|
2746
|
-
break;
|
|
2747
|
-
case 'right':
|
|
2748
|
-
top = rect.top + scrollY + (rect.height - tRect.height) / 2;
|
|
2749
|
-
left = rect.right + scrollX + gap;
|
|
2750
|
-
break;
|
|
2751
|
-
case 'top-left':
|
|
2752
|
-
top = rect.top + scrollY - tRect.height - gap;
|
|
2753
|
-
// left = rect.left + scrollX - 200;
|
|
2754
|
-
left = rect.left + scrollX;
|
|
2755
|
-
break;
|
|
2756
|
-
case 'top-right':
|
|
2757
|
-
top = rect.top + scrollY - tRect.height - gap;
|
|
2758
|
-
// left = rect.right + scrollX - tRect.width + 175 ;
|
|
2759
|
-
left = rect.right + scrollX - tRect.width;
|
|
2760
|
-
break;
|
|
2761
|
-
case 'bottom-left':
|
|
2762
|
-
top = rect.bottom + scrollY + gap;
|
|
2763
|
-
// left = rect.left + scrollX - 200;
|
|
2764
|
-
left = rect.left + scrollX;
|
|
2765
|
-
break;
|
|
2766
|
-
case 'bottom-right':
|
|
2767
|
-
top = rect.bottom + scrollY + gap;
|
|
2768
|
-
// left = rect.right + scrollX - tRect.width + 175;
|
|
2769
|
-
left = rect.right + scrollX - tRect.width;
|
|
2770
|
-
break;
|
|
3096
|
+
this.setAutoPosition(tooltipEl, instance);
|
|
3097
|
+
}
|
|
3098
|
+
getScrollParent(el) {
|
|
3099
|
+
let parent = el.parentElement;
|
|
3100
|
+
while (parent) {
|
|
3101
|
+
const style = window.getComputedStyle(parent);
|
|
3102
|
+
const overflowY = style.overflowY;
|
|
3103
|
+
if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'hidden' || overflowY === 'overlay') {
|
|
3104
|
+
return parent;
|
|
2771
3105
|
}
|
|
2772
|
-
|
|
2773
|
-
|
|
2774
|
-
|
|
2775
|
-
|
|
2776
|
-
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
//
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
3106
|
+
parent = parent.parentElement;
|
|
3107
|
+
}
|
|
3108
|
+
return document.body; // fallback
|
|
3109
|
+
}
|
|
3110
|
+
setAutoPosition(el, instance) {
|
|
3111
|
+
const hostRect = this.el.nativeElement.getBoundingClientRect();
|
|
3112
|
+
const tipRect = el.getBoundingClientRect();
|
|
3113
|
+
const scrollParent = this.getScrollParent(this.el.nativeElement);
|
|
3114
|
+
const parentRect = scrollParent.getBoundingClientRect();
|
|
3115
|
+
const gap = 8;
|
|
3116
|
+
const spaceTop = hostRect.top - parentRect.top;
|
|
3117
|
+
const spaceBottom = parentRect.bottom - hostRect.bottom;
|
|
3118
|
+
const spaceLeft = hostRect.left - parentRect.left;
|
|
3119
|
+
const spaceRight = parentRect.right - hostRect.right;
|
|
3120
|
+
let pos = 'bottom';
|
|
3121
|
+
if (this.position === 'auto') {
|
|
3122
|
+
if (spaceTop >= tipRect.height + gap)
|
|
3123
|
+
pos = 'top';
|
|
3124
|
+
else if (spaceBottom >= tipRect.height + gap)
|
|
3125
|
+
pos = 'bottom';
|
|
3126
|
+
else if (spaceRight >= tipRect.width + gap)
|
|
3127
|
+
pos = 'right';
|
|
3128
|
+
else
|
|
3129
|
+
pos = 'left';
|
|
3130
|
+
}
|
|
3131
|
+
else {
|
|
3132
|
+
pos = this.position;
|
|
3133
|
+
}
|
|
3134
|
+
instance.position = pos;
|
|
3135
|
+
// 🔥 IMPORTANT: position relative to document
|
|
3136
|
+
switch (pos) {
|
|
3137
|
+
case 'top':
|
|
3138
|
+
el.style.top = hostRect.top - tipRect.height - gap + 'px';
|
|
3139
|
+
el.style.left =
|
|
3140
|
+
hostRect.left + hostRect.width / 2 - tipRect.width / 2 + 'px';
|
|
3141
|
+
break;
|
|
3142
|
+
case 'bottom':
|
|
3143
|
+
el.style.top = hostRect.bottom + gap + 'px';
|
|
3144
|
+
el.style.left =
|
|
3145
|
+
hostRect.left + hostRect.width / 2 - tipRect.width / 2 + 'px';
|
|
3146
|
+
break;
|
|
3147
|
+
case 'left':
|
|
3148
|
+
el.style.top =
|
|
3149
|
+
hostRect.top + hostRect.height / 2 - tipRect.height / 2 + 'px';
|
|
3150
|
+
el.style.left = hostRect.left - tipRect.width - gap + 'px';
|
|
3151
|
+
break;
|
|
3152
|
+
case 'right':
|
|
3153
|
+
el.style.top =
|
|
3154
|
+
hostRect.top + hostRect.height / 2 - tipRect.height / 2 + 'px';
|
|
3155
|
+
el.style.left = hostRect.right + gap + 'px';
|
|
3156
|
+
break;
|
|
3157
|
+
}
|
|
3158
|
+
el.style.visibility = 'visible';
|
|
2813
3159
|
}
|
|
2814
3160
|
// --------------------
|
|
2815
3161
|
// HIDE TOOLTIP
|
|
@@ -3073,6 +3419,7 @@ class MsPagination {
|
|
|
3073
3419
|
disabled = false;
|
|
3074
3420
|
pageChange = new EventEmitter();
|
|
3075
3421
|
pageSizeChange = new EventEmitter();
|
|
3422
|
+
dropdownRef;
|
|
3076
3423
|
totalPages = 0;
|
|
3077
3424
|
pages = [];
|
|
3078
3425
|
maxPages = 5;
|
|
@@ -3083,13 +3430,20 @@ class MsPagination {
|
|
|
3083
3430
|
this.calculate();
|
|
3084
3431
|
}
|
|
3085
3432
|
toggleDropdown(event) {
|
|
3086
|
-
|
|
3087
|
-
const rect = selectElement.getBoundingClientRect();
|
|
3088
|
-
const spaceBelow = window.innerHeight - rect.bottom;
|
|
3089
|
-
const dropdownHeight = this.pageSizeOptions.length * 32; // approximate height per option
|
|
3090
|
-
// Check if there's enough space below; if not, open upwards
|
|
3091
|
-
this.openUp = spaceBelow < dropdownHeight;
|
|
3433
|
+
event.stopPropagation();
|
|
3092
3434
|
this.dropdownOpen = !this.dropdownOpen;
|
|
3435
|
+
if (this.dropdownOpen) {
|
|
3436
|
+
setTimeout(() => this.checkDropdownPosition(), 0);
|
|
3437
|
+
}
|
|
3438
|
+
}
|
|
3439
|
+
checkDropdownPosition() {
|
|
3440
|
+
const dropdownEl = this.dropdownRef.nativeElement;
|
|
3441
|
+
const rect = dropdownEl.getBoundingClientRect();
|
|
3442
|
+
const spaceBelow = window.innerHeight - rect.bottom;
|
|
3443
|
+
const spaceAbove = rect.top;
|
|
3444
|
+
// approx dropdown height (adjust if needed)
|
|
3445
|
+
const dropdownHeight = 200;
|
|
3446
|
+
this.openUp = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
|
|
3093
3447
|
}
|
|
3094
3448
|
get fromRecord() {
|
|
3095
3449
|
return this.totalItems === 0 ? 0 : (this.currentPage - 1) * this.pageSize + 1;
|
|
@@ -3170,12 +3524,22 @@ class MsPagination {
|
|
|
3170
3524
|
to: this.toRecord
|
|
3171
3525
|
});
|
|
3172
3526
|
}
|
|
3527
|
+
onDocumentClick(event) {
|
|
3528
|
+
if (!this.dropdownOpen)
|
|
3529
|
+
return;
|
|
3530
|
+
const clickedInside = this.dropdownRef
|
|
3531
|
+
?.nativeElement
|
|
3532
|
+
?.contains(event.target);
|
|
3533
|
+
if (!clickedInside) {
|
|
3534
|
+
this.dropdownOpen = false;
|
|
3535
|
+
}
|
|
3536
|
+
}
|
|
3173
3537
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3174
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPagination, isStandalone: true, selector: "ms-pagination", inputs: { totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", loading: "loading", disabled: "disabled" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ms-pagination\" [class.disabled]=\"disabled\">\n <div class=\"ms-page-size\">\n <div class=\"custom-select\" [class.open-up]=\"openUp\">\n <div class=\"selected\" (click)=\"toggleDropdown($event)\">\n <span>{{ selectedPageSize }}</span>\n <div class=\"arrow-icon\">\n <ms-icon [name]=\"'chevron-down'\" *ngIf=\"!dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n <ms-icon [name]=\"'chevron-up'\" *ngIf=\"dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n </div>\n </div>\n <ul class=\"options\" *ngIf=\"dropdownOpen\">\n <li *ngFor=\"let s of pageSizeOptions\" (click)=\"changePageSize(s)\">\n {{ s }}\n <span *ngIf=\"s === selectedPageSize\" class=\"tick-icon\">\n <ms-icon [name]=\"'check'\" [color]=\"'ms-icon-blue'\"></ms-icon>\n </span>\n </li>\n </ul>\n </div>\n <span class=\"ms-muted\">per page</span>\n <div class=\"ms-vl\"></div>\n <div class=\"ms-results\">\n Showing {{ fromRecord }}\u2013{{ toRecord }} of {{ totalItems }} results\n </div>\n </div>\n <div class=\"ms-pages\">\n <button class=\"ms-page-btn\" (click)=\"prev()\" [disabled]=\"currentPage === 1 || loading || disabled\">\u2039</button>\n <button *ngFor=\"let p of pages\" class=\"ms-page-btn\" [class.active]=\"p === currentPage\"\n [disabled]=\"isEllipsis(p) || loading || disabled\" (click)=\"changePage(p)\">\n {{ p }}\n </button>\n <button class=\"ms-page-btn\" (click)=\"next()\"\n [disabled]=\"currentPage === totalPages || loading || disabled\">\u203A</button>\n </div>\n <div class=\"loader\" *ngIf=\"loading\">Loading...</div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
3538
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPagination, isStandalone: true, selector: "ms-pagination", inputs: { totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", loading: "loading", disabled: "disabled" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ms-pagination\" [class.disabled]=\"disabled\">\n <div class=\"ms-page-size\">\n <div class=\"custom-select\" [class.open-up]=\"openUp\"\n #dropdownRef>\n <div class=\"ms-selected\" (click)=\"toggleDropdown($event)\">\n <span>{{ selectedPageSize }}</span>\n <div class=\"arrow-icon\">\n <ms-icon [name]=\"'chevron-down'\" *ngIf=\"!dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n <ms-icon [name]=\"'chevron-up'\" *ngIf=\"dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n </div>\n </div>\n <ul class=\"ms-options\" *ngIf=\"dropdownOpen\">\n <li *ngFor=\"let s of pageSizeOptions\" (click)=\"changePageSize(s)\">\n {{ s }}\n <span *ngIf=\"s === selectedPageSize\" class=\"tick-icon\">\n <ms-icon [name]=\"'check'\" [color]=\"'ms-icon-blue'\"></ms-icon>\n </span>\n </li>\n </ul>\n </div>\n <span class=\"ms-muted\">per page</span>\n <div class=\"ms-vl\"></div>\n <div class=\"ms-results\">\n Showing {{ fromRecord }}\u2013{{ toRecord }} of {{ totalItems }} results\n </div>\n </div>\n <div class=\"ms-pages\">\n <button class=\"ms-page-btn\" (click)=\"prev()\" [disabled]=\"currentPage === 1 || loading || disabled\">\u2039</button>\n <button *ngFor=\"let p of pages\" class=\"ms-page-btn\" [class.active]=\"p === currentPage\"\n [disabled]=\"isEllipsis(p) || loading || disabled\" (click)=\"changePage(p)\">\n {{ p }}\n </button>\n <button class=\"ms-page-btn\" (click)=\"next()\"\n [disabled]=\"currentPage === totalPages || loading || disabled\">\u203A</button>\n </div>\n <div class=\"loader\" *ngIf=\"loading\">Loading...</div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
3175
3539
|
}
|
|
3176
3540
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPagination, decorators: [{
|
|
3177
3541
|
type: Component,
|
|
3178
|
-
args: [{ selector: 'ms-pagination', imports: [CommonModule, FormsModule, MsIcon], template: "<div class=\"ms-pagination\" [class.disabled]=\"disabled\">\n <div class=\"ms-page-size\">\n <div class=\"custom-select\" [class.open-up]=\"openUp\">\n <div class=\"selected\" (click)=\"toggleDropdown($event)\">\n <span>{{ selectedPageSize }}</span>\n <div class=\"arrow-icon\">\n <ms-icon [name]=\"'chevron-down'\" *ngIf=\"!dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n <ms-icon [name]=\"'chevron-up'\" *ngIf=\"dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n </div>\n </div>\n <ul class=\"options\" *ngIf=\"dropdownOpen\">\n <li *ngFor=\"let s of pageSizeOptions\" (click)=\"changePageSize(s)\">\n {{ s }}\n <span *ngIf=\"s === selectedPageSize\" class=\"tick-icon\">\n <ms-icon [name]=\"'check'\" [color]=\"'ms-icon-blue'\"></ms-icon>\n </span>\n </li>\n </ul>\n </div>\n <span class=\"ms-muted\">per page</span>\n <div class=\"ms-vl\"></div>\n <div class=\"ms-results\">\n Showing {{ fromRecord }}\u2013{{ toRecord }} of {{ totalItems }} results\n </div>\n </div>\n <div class=\"ms-pages\">\n <button class=\"ms-page-btn\" (click)=\"prev()\" [disabled]=\"currentPage === 1 || loading || disabled\">\u2039</button>\n <button *ngFor=\"let p of pages\" class=\"ms-page-btn\" [class.active]=\"p === currentPage\"\n [disabled]=\"isEllipsis(p) || loading || disabled\" (click)=\"changePage(p)\">\n {{ p }}\n </button>\n <button class=\"ms-page-btn\" (click)=\"next()\"\n [disabled]=\"currentPage === totalPages || loading || disabled\">\u203A</button>\n </div>\n <div class=\"loader\" *ngIf=\"loading\">Loading...</div>\n</div>" }]
|
|
3542
|
+
args: [{ selector: 'ms-pagination', imports: [CommonModule, FormsModule, MsIcon], template: "<div class=\"ms-pagination\" [class.disabled]=\"disabled\">\n <div class=\"ms-page-size\">\n <div class=\"custom-select\" [class.open-up]=\"openUp\"\n #dropdownRef>\n <div class=\"ms-selected\" (click)=\"toggleDropdown($event)\">\n <span>{{ selectedPageSize }}</span>\n <div class=\"arrow-icon\">\n <ms-icon [name]=\"'chevron-down'\" *ngIf=\"!dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n <ms-icon [name]=\"'chevron-up'\" *ngIf=\"dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n </div>\n </div>\n <ul class=\"ms-options\" *ngIf=\"dropdownOpen\">\n <li *ngFor=\"let s of pageSizeOptions\" (click)=\"changePageSize(s)\">\n {{ s }}\n <span *ngIf=\"s === selectedPageSize\" class=\"tick-icon\">\n <ms-icon [name]=\"'check'\" [color]=\"'ms-icon-blue'\"></ms-icon>\n </span>\n </li>\n </ul>\n </div>\n <span class=\"ms-muted\">per page</span>\n <div class=\"ms-vl\"></div>\n <div class=\"ms-results\">\n Showing {{ fromRecord }}\u2013{{ toRecord }} of {{ totalItems }} results\n </div>\n </div>\n <div class=\"ms-pages\">\n <button class=\"ms-page-btn\" (click)=\"prev()\" [disabled]=\"currentPage === 1 || loading || disabled\">\u2039</button>\n <button *ngFor=\"let p of pages\" class=\"ms-page-btn\" [class.active]=\"p === currentPage\"\n [disabled]=\"isEllipsis(p) || loading || disabled\" (click)=\"changePage(p)\">\n {{ p }}\n </button>\n <button class=\"ms-page-btn\" (click)=\"next()\"\n [disabled]=\"currentPage === totalPages || loading || disabled\">\u203A</button>\n </div>\n <div class=\"loader\" *ngIf=\"loading\">Loading...</div>\n</div>" }]
|
|
3179
3543
|
}], propDecorators: { totalItems: [{
|
|
3180
3544
|
type: Input
|
|
3181
3545
|
}], pageSize: [{
|
|
@@ -3192,6 +3556,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3192
3556
|
type: Output
|
|
3193
3557
|
}], pageSizeChange: [{
|
|
3194
3558
|
type: Output
|
|
3559
|
+
}], dropdownRef: [{
|
|
3560
|
+
type: ViewChild,
|
|
3561
|
+
args: ['dropdownRef']
|
|
3562
|
+
}], onDocumentClick: [{
|
|
3563
|
+
type: HostListener,
|
|
3564
|
+
args: ['document:click', ['$event']]
|
|
3195
3565
|
}] } });
|
|
3196
3566
|
|
|
3197
3567
|
// export interface TopbarDetail {
|
|
@@ -3416,13 +3786,13 @@ class MsSidebar {
|
|
|
3416
3786
|
}
|
|
3417
3787
|
onSelectionChange(event) {
|
|
3418
3788
|
}
|
|
3419
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSidebar, deps: [{ token: i1.DomSanitizer }, { token: i2$
|
|
3789
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSidebar, deps: [{ token: i1.DomSanitizer }, { token: i2$1.Router }, { token: TopbarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3420
3790
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsSidebar, isStandalone: true, selector: "ms-sidebar", inputs: { id: "id", search: "search", setting: "setting", userDetail: "userDetail", country: "country", userDetailList: "userDetailList", badge: "badge", details: "details", flagsLists: "flagsLists" }, outputs: { select: "select" }, ngImport: i0, template: "<div class=\"ms-sidebar\" [ngClass]=\"{'collapsed': isCollapsed, 'expanded': !isCollapsed}\">\n <div class=\"ms-d-flex ms-justify-content-between\">\n <img src=\"https://ds-doc.sentrixbar.com/logo.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"!isCollapsed\">\n <img src=\"https://ds-doc.sentrixbar.com/logo-small.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"isCollapsed\"\n (click)=\"toggleSidebar()\">\n <button class=\"toggle-btn\" (click)=\"toggleSidebar()\" *ngIf=\"!isCollapsed\">\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sidebar-left-expand.svg\" alt=\"Toggle\" class=\"icon\">\n </button>\n </div>\n\n @if(country){\n <div class=\"ms-mt-3\" [ngClass]=\"{'ms-mb-3': !isCollapsed}\">\n <ms-dropdown *ngIf=\"!isCollapsed\" [text]=\"'Country'\" [isDisabled]=\"false\" [selectedItem]=\"selectedCountry\"\n [multiSelectDisplay]=\"'text'\" [allowMultiple]=\"false\" [icon]=\"'chevron-down'\" [iconPosition]=\"'suffix'\"\n [items]=\"flagsLists\" [closeOnSelect]=\"true\" [closeOnClickOutside]=\"true\" [showFlagImage]=\"true\"\n [searchable]=\"true\" (selectionChange)=\"onSelectionChange($event)\">\n </ms-dropdown>\n @if(isCollapsed){\n <div class=\"menu-section-country\">\n <div class=\"menu-item-country\">\n <ms-flag-icon [name]=\"selectedContry?.label | lowercase \"></ms-flag-icon>\n </div>\n </div>\n }\n </div>\n }\n\n @if(search){\n <div class=\"ms-d-flex ms-justify-content-between ms-mb-2\" [ngClass]=\"{'search-hidden': !isSearchVisible}\">\n <div class=\"search-wrapper\" *ngIf=\"!isCollapsed\">\n <input type=\"text\" placeholder=\"Search...\" class=\"search-input \" [(ngModel)]=\"searchText\" (input)=\"filterMenu()\">\n <span class=\"search-icon\">\n <ms-icon [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n </span>\n </div>\n </div>\n }\n <div class=\"menu-container\">\n <div *ngFor=\"let section of filteredMenuData\" class=\"menu-section\">\n <div class=\"menu-item \" (click)=\"toggleSection(section, $event)\"\n [ngClass]=\"{'active-section':selectedSectionId === section.id}\">\n <span class=\"\" [ngClass]=\"{'ms-me-2': !isCollapsed}\">\n <ms-icon [name]=\"section.icon\"></ms-icon>\n </span>\n <span class=\"title ms-f-w-500\">{{ section.title }}</span>\n <span class=\"ms-selected-badge\" *ngIf=\"section?.sub_menu?.length > 0 && section?.sub_menu?.length > 0 && !isCollapsed\">{{\n section?.sub_menu?.length }}</span>\n <span alt=\"Chevron\" class=\"\" (click)=\"rotating(section)\" *ngIf=\"!isCollapsed && section.sub_menu?.length > 0\">\n <ms-icon [name]=\"'chevron-up'\" [size]=\"'small'\" *ngIf=\"rotate[section.id]\"></ms-icon>\n <ms-icon [name]=\"'chevron-down'\" [size]=\"'small'\" *ngIf=\"!rotate[section.id]\"></ms-icon>\n </span>\n </div>\n <ul class=\"submenu\" *ngIf=\"openSections[section.id] && !isCollapsed\">\n <li class=\"submenu-item \" *ngFor=\"let item of section.sub_menu\" (click)=\"selectItem(item , section)\"\n [ngClass]=\"{'active-section': activeItem === item.id}\">\n {{ item.label }}\n </li>\n </ul>\n\n </div>\n </div>\n <div class=\"\" [ngClass]=\"{'ms-sidebar-footer': userDetail || setting}\">\n @if(setting){\n <div class=\"Settings-section menu-item \">\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sparkles.svg\" alt=\"Settings\" class=\"ms-me-2 icon\">\n <span class=\"user-name ms-f-w-500\" *ngIf=\"!isCollapsed\">Settings</span>\n </div>\n }\n @if(userDetail && userDetailList){\n <div class=\"profile-section menu-item\" #profileSection [ngClass]=\"{'active-section': profileFlyoutVisible}\"\n (click)=\"toggleProfileFlyout()\">\n <div class=\"user-avatar\">{{ userInitials }}</div>\n <span class=\"user-name ms-f-w-500 \" *ngIf=\"!isCollapsed\">{{ userName || 'User Name' }}</span>\n <div class=\"profile-flyout\" *ngIf=\"profileFlyoutVisible\">\n <div class=\"flyout-item\" (click)=\"viewProfile()\">View Profile</div>\n <div class=\"flyout-item\" (click)=\"accountSettings()\">Account Settings</div>\n <div class=\"flyout-item\" (click)=\"documentation()\">Documentation</div>\n <hr class=\"flyout-divider\">\n <div class=\"flyout-section\">\n <div class=\"flyout-title\">Switch Account</div>\n <div *ngFor=\"let account of accounts; let i = index\" class=\"account-item\">\n <div class=\"account-info\">\n <div class=\"account-avatar\">{{ getInitials(account.name) }}</div>\n <div class=\"account-details\">\n <div class=\"account-name ms-f-w-500\">{{ account.name }}</div>\n <div class=\"account-email ms-fs-12\">{{ account.email }}</div>\n </div>\n </div>\n <input type=\"radio\" [checked]=\"account.selected\" (change)=\"selectAccount(i)\" name=\"account\">\n </div>\n </div>\n <button class=\"flyout-button\">Add Account</button>\n <hr class=\"flyout-divider\">\n <div class=\"flyout-item sign-out\">Sign Out</div>\n </div>\n </div>\n }\n </div>\n</div>\n<ul class=\"submenu-flyout\" *ngIf=\"isCollapsed && flyoutSectionId && flyoutItems?.length > 0\" [style.top.px]=\"flyoutTop\">\n <li *ngFor=\"let item of flyoutItems\" (click)=\"selectItem(item, flyoutItems)\">\n {{ item.label }}\n </li>\n</ul>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MsDropdown, selector: "ms-dropdown", inputs: ["text", "isDisabled", "items", "icon", "iconPosition", "closeOnSelect", "closeOnClickOutside", "selectedItem", "allowMultiple", "maxHeight", "loading", "error", "ariaLabel", "searchable", "searchPlaceholder", "noResultsText", "customClass", "dropdownMenuClass", "dropdownMenuWidth", "showFlagImage", "multiSelectDisplay", "inputPlaceholder", "inputLabel", "inputErrorState", "inputWarningState", "inputFocusState", "required", "size", "variant", "radiussize", "iconOnly", "useInputField", "state"], outputs: ["selectionChange"] }, { kind: "component", type: MsFlagIcon, selector: "ms-flag-icon", inputs: ["name", "size"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }] });
|
|
3421
3791
|
}
|
|
3422
3792
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSidebar, decorators: [{
|
|
3423
3793
|
type: Component,
|
|
3424
3794
|
args: [{ selector: 'ms-sidebar', standalone: true, imports: [CommonModule, FormsModule, MsDropdown, MsFlagIcon, MsIcon], template: "<div class=\"ms-sidebar\" [ngClass]=\"{'collapsed': isCollapsed, 'expanded': !isCollapsed}\">\n <div class=\"ms-d-flex ms-justify-content-between\">\n <img src=\"https://ds-doc.sentrixbar.com/logo.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"!isCollapsed\">\n <img src=\"https://ds-doc.sentrixbar.com/logo-small.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"isCollapsed\"\n (click)=\"toggleSidebar()\">\n <button class=\"toggle-btn\" (click)=\"toggleSidebar()\" *ngIf=\"!isCollapsed\">\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sidebar-left-expand.svg\" alt=\"Toggle\" class=\"icon\">\n </button>\n </div>\n\n @if(country){\n <div class=\"ms-mt-3\" [ngClass]=\"{'ms-mb-3': !isCollapsed}\">\n <ms-dropdown *ngIf=\"!isCollapsed\" [text]=\"'Country'\" [isDisabled]=\"false\" [selectedItem]=\"selectedCountry\"\n [multiSelectDisplay]=\"'text'\" [allowMultiple]=\"false\" [icon]=\"'chevron-down'\" [iconPosition]=\"'suffix'\"\n [items]=\"flagsLists\" [closeOnSelect]=\"true\" [closeOnClickOutside]=\"true\" [showFlagImage]=\"true\"\n [searchable]=\"true\" (selectionChange)=\"onSelectionChange($event)\">\n </ms-dropdown>\n @if(isCollapsed){\n <div class=\"menu-section-country\">\n <div class=\"menu-item-country\">\n <ms-flag-icon [name]=\"selectedContry?.label | lowercase \"></ms-flag-icon>\n </div>\n </div>\n }\n </div>\n }\n\n @if(search){\n <div class=\"ms-d-flex ms-justify-content-between ms-mb-2\" [ngClass]=\"{'search-hidden': !isSearchVisible}\">\n <div class=\"search-wrapper\" *ngIf=\"!isCollapsed\">\n <input type=\"text\" placeholder=\"Search...\" class=\"search-input \" [(ngModel)]=\"searchText\" (input)=\"filterMenu()\">\n <span class=\"search-icon\">\n <ms-icon [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n </span>\n </div>\n </div>\n }\n <div class=\"menu-container\">\n <div *ngFor=\"let section of filteredMenuData\" class=\"menu-section\">\n <div class=\"menu-item \" (click)=\"toggleSection(section, $event)\"\n [ngClass]=\"{'active-section':selectedSectionId === section.id}\">\n <span class=\"\" [ngClass]=\"{'ms-me-2': !isCollapsed}\">\n <ms-icon [name]=\"section.icon\"></ms-icon>\n </span>\n <span class=\"title ms-f-w-500\">{{ section.title }}</span>\n <span class=\"ms-selected-badge\" *ngIf=\"section?.sub_menu?.length > 0 && section?.sub_menu?.length > 0 && !isCollapsed\">{{\n section?.sub_menu?.length }}</span>\n <span alt=\"Chevron\" class=\"\" (click)=\"rotating(section)\" *ngIf=\"!isCollapsed && section.sub_menu?.length > 0\">\n <ms-icon [name]=\"'chevron-up'\" [size]=\"'small'\" *ngIf=\"rotate[section.id]\"></ms-icon>\n <ms-icon [name]=\"'chevron-down'\" [size]=\"'small'\" *ngIf=\"!rotate[section.id]\"></ms-icon>\n </span>\n </div>\n <ul class=\"submenu\" *ngIf=\"openSections[section.id] && !isCollapsed\">\n <li class=\"submenu-item \" *ngFor=\"let item of section.sub_menu\" (click)=\"selectItem(item , section)\"\n [ngClass]=\"{'active-section': activeItem === item.id}\">\n {{ item.label }}\n </li>\n </ul>\n\n </div>\n </div>\n <div class=\"\" [ngClass]=\"{'ms-sidebar-footer': userDetail || setting}\">\n @if(setting){\n <div class=\"Settings-section menu-item \">\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sparkles.svg\" alt=\"Settings\" class=\"ms-me-2 icon\">\n <span class=\"user-name ms-f-w-500\" *ngIf=\"!isCollapsed\">Settings</span>\n </div>\n }\n @if(userDetail && userDetailList){\n <div class=\"profile-section menu-item\" #profileSection [ngClass]=\"{'active-section': profileFlyoutVisible}\"\n (click)=\"toggleProfileFlyout()\">\n <div class=\"user-avatar\">{{ userInitials }}</div>\n <span class=\"user-name ms-f-w-500 \" *ngIf=\"!isCollapsed\">{{ userName || 'User Name' }}</span>\n <div class=\"profile-flyout\" *ngIf=\"profileFlyoutVisible\">\n <div class=\"flyout-item\" (click)=\"viewProfile()\">View Profile</div>\n <div class=\"flyout-item\" (click)=\"accountSettings()\">Account Settings</div>\n <div class=\"flyout-item\" (click)=\"documentation()\">Documentation</div>\n <hr class=\"flyout-divider\">\n <div class=\"flyout-section\">\n <div class=\"flyout-title\">Switch Account</div>\n <div *ngFor=\"let account of accounts; let i = index\" class=\"account-item\">\n <div class=\"account-info\">\n <div class=\"account-avatar\">{{ getInitials(account.name) }}</div>\n <div class=\"account-details\">\n <div class=\"account-name ms-f-w-500\">{{ account.name }}</div>\n <div class=\"account-email ms-fs-12\">{{ account.email }}</div>\n </div>\n </div>\n <input type=\"radio\" [checked]=\"account.selected\" (change)=\"selectAccount(i)\" name=\"account\">\n </div>\n </div>\n <button class=\"flyout-button\">Add Account</button>\n <hr class=\"flyout-divider\">\n <div class=\"flyout-item sign-out\">Sign Out</div>\n </div>\n </div>\n }\n </div>\n</div>\n<ul class=\"submenu-flyout\" *ngIf=\"isCollapsed && flyoutSectionId && flyoutItems?.length > 0\" [style.top.px]=\"flyoutTop\">\n <li *ngFor=\"let item of flyoutItems\" (click)=\"selectItem(item, flyoutItems)\">\n {{ item.label }}\n </li>\n</ul>" }]
|
|
3425
|
-
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2$
|
|
3795
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2$1.Router }, { type: TopbarService }], propDecorators: { id: [{
|
|
3426
3796
|
type: Input
|
|
3427
3797
|
}], search: [{
|
|
3428
3798
|
type: Input
|
|
@@ -3630,7 +4000,7 @@ class MsFileUploader {
|
|
|
3630
4000
|
return this.accept.split(',').map(ext => ext.trim().toUpperCase()).join(', ');
|
|
3631
4001
|
}
|
|
3632
4002
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFileUploader, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3633
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsFileUploader, isStandalone: true, selector: "ms-file-uploader", inputs: { label: "label", required: "required", readonly: "readonly", disabled: "disabled", accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", variant: "variant", skeleton: "skeleton" }, outputs: { uploadedFilesChange: "uploadedFilesChange" }, viewQueries: [{ propertyName: "fileInputButton", first: true, predicate: ["fileInputButton"], descendants: true }, { propertyName: "fileInputDragDrop", first: true, predicate: ["fileInputDragDrop"], descendants: true }], ngImport: i0, template: "@if (skeleton) {\n <div class=\"ms-file-uploader-skeleton\" [class]=\"variant\"></div>\n} @else {\n<div class=\"file-uploader-wrapper\">\n <!-- <div *ngIf=\"label\" class=\"file-uploader-label\">\n <label>{{ label }} <span *ngIf=\"required\" class=\"required\">*</span></label>\n </div> -->\n\n <!-- ===================== BUTTON VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'button'\">\n <!-- Instructions -->\n <div class=\"file-uploader-instructions button-variant\">\n <p class=\"ms-mb-1\">{{ label }}</p>\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Button Upload Area -->\n <div class=\"button-upload-area\">\n <button \n type=\"button\"\n class=\"upload-button\"\n (click)=\"triggerFileInput()\"\n [disabled]=\"disabled\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/upload.svg'\"></span>\n <span>Upload file</span>\n </button>\n \n <!-- <p class=\"button-hint\">or drag and drop</p> -->\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputButton\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </ng-container>\n\n <!-- ===================== DRAG & DROP VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'dragdrop'\">\n <!-- Instructions outside the border -->\n <div class=\"file-uploader-instructions dragdrop-variant\">\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Drag and Drop Area with Dotted Border -->\n <div \n class=\"file-uploader-dropzone\"\n [class.dragover]=\"isDragOver\"\n [class.disabled]=\"disabled\"\n [class.error]=\"showError || invalidFileError\"\n [class.focused]=\"isFocused\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDropFiles($event)\"\n (click)=\"triggerFileInput()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\">\n \n <!-- Upload Icon and Text -->\n <div class=\"dropzone-content\">\n <span class=\"upload-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/file-plus.svg'\"></span>\n <p class=\"upload-text\">Drag and drop your files here</p>\n <p class=\"upload-subtext\">or <span class=\"click-text\">click to browse</span></p>\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputDragDrop\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </div>\n </ng-container>\n\n <!-- Error Message -->\n <div *ngIf=\"showError\" class=\"error-message\">\n <p>This field is required. Please select at least one file.</p>\n </div>\n\n <!-- Invalid File Type Error Message -->\n <div *ngIf=\"invalidFileError && invalidFileErrorMessage\" class=\"invalid-file-error-message\">\n <p>{{ invalidFileErrorMessage }}</p>\n </div>\n\n <!-- Uploaded Files List (Shared for both variants) -->\n <div *ngIf=\"uploadedFiles.length > 0\" class=\"uploaded-files\">\n <div class=\"files-list\">\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"file-item\">\n <div class=\"file-info\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/File-pdf.svg'\"></span>\n <div class=\"file-details\">\n <p class=\"file-name\" [title]=\"file.name\">{{ file.name }}</p>\n <p class=\"file-size\">{{ file.size }}</p>\n </div>\n </div>\n\n <div class=\"file-actions\">\n <!-- Loader State -->\n <div *ngIf=\"file.isLoading\" class=\"loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'sm'\"></ms-spinner>\n </div>\n\n <!-- Success Tick State -->\n <div *ngIf=\"file.isSuccess && !file.isLoading\" class=\"success-tick\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </div>\n\n <!-- Remove Button State -->\n <button \n *ngIf=\"!file.isLoading && !file.isSuccess\"\n type=\"button\"\n class=\"remove-btn\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\">\n <span class=\"d-flex align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/x.svg'\"></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type:
|
|
4003
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsFileUploader, isStandalone: true, selector: "ms-file-uploader", inputs: { label: "label", required: "required", readonly: "readonly", disabled: "disabled", accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", variant: "variant", skeleton: "skeleton" }, outputs: { uploadedFilesChange: "uploadedFilesChange" }, viewQueries: [{ propertyName: "fileInputButton", first: true, predicate: ["fileInputButton"], descendants: true }, { propertyName: "fileInputDragDrop", first: true, predicate: ["fileInputDragDrop"], descendants: true }], ngImport: i0, template: "@if (skeleton) {\n <div class=\"ms-file-uploader-skeleton\" [class]=\"variant\"></div>\n} @else {\n<div class=\"file-uploader-wrapper\">\n <!-- <div *ngIf=\"label\" class=\"file-uploader-label\">\n <label>{{ label }} <span *ngIf=\"required\" class=\"required\">*</span></label>\n </div> -->\n\n <!-- ===================== BUTTON VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'button'\">\n <!-- Instructions -->\n <div class=\"file-uploader-instructions button-variant\">\n <p class=\"ms-mb-1\">{{ label }}</p>\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Button Upload Area -->\n <div class=\"button-upload-area\">\n <button \n type=\"button\"\n class=\"upload-button\"\n (click)=\"triggerFileInput()\"\n [disabled]=\"disabled\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/upload.svg'\"></span>\n <span>Upload file</span>\n </button>\n \n <!-- <p class=\"button-hint\">or drag and drop</p> -->\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputButton\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </ng-container>\n\n <!-- ===================== DRAG & DROP VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'dragdrop'\">\n <!-- Instructions outside the border -->\n <div class=\"file-uploader-instructions dragdrop-variant\">\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Drag and Drop Area with Dotted Border -->\n <div \n class=\"file-uploader-dropzone\"\n [class.dragover]=\"isDragOver\"\n [class.disabled]=\"disabled\"\n [class.error]=\"showError || invalidFileError\"\n [class.focused]=\"isFocused\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDropFiles($event)\"\n (click)=\"triggerFileInput()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\">\n \n <!-- Upload Icon and Text -->\n <div class=\"dropzone-content\">\n <span class=\"upload-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/file-plus.svg'\"></span>\n <p class=\"upload-text\">Drag and drop your files here</p>\n <p class=\"upload-subtext\">or <span class=\"click-text\">click to browse</span></p>\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputDragDrop\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </div>\n </ng-container>\n\n <!-- Error Message -->\n <div *ngIf=\"showError\" class=\"error-message\">\n <p>This field is required. Please select at least one file.</p>\n </div>\n\n <!-- Invalid File Type Error Message -->\n <div *ngIf=\"invalidFileError && invalidFileErrorMessage\" class=\"invalid-file-error-message\">\n <p>{{ invalidFileErrorMessage }}</p>\n </div>\n\n <!-- Uploaded Files List (Shared for both variants) -->\n <div *ngIf=\"uploadedFiles.length > 0\" class=\"uploaded-files\">\n <div class=\"files-list\">\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"file-item\">\n <div class=\"file-info\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/File-pdf.svg'\"></span>\n <div class=\"file-details\">\n <p class=\"file-name\" [title]=\"file.name\">{{ file.name }}</p>\n <p class=\"file-size\">{{ file.size }}</p>\n </div>\n </div>\n\n <div class=\"file-actions\">\n <!-- Loader State -->\n <div *ngIf=\"file.isLoading\" class=\"loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'sm'\"></ms-spinner>\n </div>\n\n <!-- Success Tick State -->\n <div *ngIf=\"file.isSuccess && !file.isLoading\" class=\"success-tick\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </div>\n\n <!-- Remove Button State -->\n <button \n *ngIf=\"!file.isLoading && !file.isSuccess\"\n type=\"button\"\n class=\"remove-btn\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\">\n <span class=\"d-flex align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/x.svg'\"></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsSpinner, selector: "ms-spinner", inputs: ["color", "size", "text"], outputs: ["htmlChange"] }] });
|
|
3634
4004
|
}
|
|
3635
4005
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFileUploader, decorators: [{
|
|
3636
4006
|
type: Component,
|
|
@@ -3718,12 +4088,17 @@ class MsTabs {
|
|
|
3718
4088
|
});
|
|
3719
4089
|
this.select.emit(item);
|
|
3720
4090
|
}
|
|
4091
|
+
OnInit() {
|
|
4092
|
+
setTimeout(() => {
|
|
4093
|
+
console.log(this.tabsList);
|
|
4094
|
+
}, 3000);
|
|
4095
|
+
}
|
|
3721
4096
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3722
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTabs, isStandalone: true, selector: "ms-tabs", inputs: { tabsType: "tabsType", styleType: "styleType", tabsList: "tabsList", skeleton: "skeleton", disabled: "disabled" }, outputs: { select: "select" }, ngImport: i0, template: "@if(!skeleton && tabsType === 'horizontel'){\n@if(styleType === 'default'){\n<div class=\"ms-default-tabs\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-tabs\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n <div class=\"ms-tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}\n}@else if (!skeleton && tabsType === 'vertical'){\n@if(styleType === 'default'){\n<div class=\"ms-default-vertical-tabs\">\n <div class=\"tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-vertical-tabs\">\n <div class=\"tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n <div class=\"ms-tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}\n}@else if(skeleton){\n<div class=\"ms-default-tabs\">\n <div class=\"tabs\">\n <div class=\"tab skeleton\"></div>\n </div>\n</div>\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
4097
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTabs, isStandalone: true, selector: "ms-tabs", inputs: { tabsType: "tabsType", styleType: "styleType", tabsList: "tabsList", skeleton: "skeleton", disabled: "disabled" }, outputs: { select: "select" }, ngImport: i0, template: "@if(!skeleton && tabsType === 'horizontel'){\n@if(styleType === 'default'){\n<div class=\"ms-default-tabs\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-tabs\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n <div class=\"ms-tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}\n}@else if (!skeleton && tabsType === 'vertical'){\n@if(styleType === 'default'){\n<div class=\"ms-default-vertical-tabs\">\n <div class=\"tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-vertical-tabs\">\n <div class=\"tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n <div class=\"ms-tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}\n}@else if(skeleton){\n<div class=\"ms-default-tabs\">\n <div class=\"tabs\">\n <div class=\"tab skeleton\"></div>\n </div>\n</div>\n}", styles: [".ms-default-tabs .tabs{display:flex;gap:20px}.ms-default-tabs input[type=radio]{display:none}.ms-default-tabs .tab{padding:7px 12px;border-radius:6px;color:#6a6b6d!important;border:1px solid rgba(42,47,58,0);cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-default-tabs .tab:hover{background:#f5f5f5;color:#1b1f22!important}.ms-default-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-default-tabs .tab.disabled{background:#ebebeb;color:#ababab!important;cursor:not-allowed;pointer-events:none}.ms-default-tabs .tab.disabled{color:#1b1f22;background:#ebebeb;border-radius:6px;cursor:not-allowed;pointer-events:none}.ms-default-tabs .tab.skeleton{background:#ebebeb;padding:7px 24px}.ms-pill-tabs .tabs{display:flex;gap:20px}.ms-pill-tabs input[type=radio]{display:none}.ms-pill-tabs .tab{padding:7px 12px;border-radius:6px;background:#fff;color:#1b1f22;border:1px solid #0084FF;cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-pill-tabs .tab:hover{background:#f5f5f5;color:#1b1f22}.ms-pill-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-pill-tabs .tab.disabled{color:#1b1f22;background:#ebebeb;border-radius:6px;cursor:not-allowed;pointer-events:none}.ms-line-tabs .ms-tabs{display:flex;gap:20px}.ms-line-tabs .ms-tab:hover{color:#1b1f22!important;border-bottom:2px solid #E0E0E0}.ms-line-tabs input[type=radio]:checked+.ms-tab{color:#1b1f22!important;border-bottom:2px solid #0084FF}.ms-line-tabs .ms-tab.disabled{color:#1b1f22;border-radius:6px;cursor:not-allowed;pointer-events:none}.ms-default-vertical-tabs .tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-default-vertical-tabs input[type=radio]{display:none}.ms-default-vertical-tabs .tab{padding:7px 12px;border-radius:6px;color:#6a6b6d!important;border:1px solid rgba(42,47,58,0);cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-default-vertical-tabs .tab:hover{background:#f5f5f5;color:#1b1f22!important}.ms-default-vertical-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-default-vertical-tabs .tab.disabled{background:#ebebeb;color:#ababab!important;cursor:not-allowed;pointer-events:none}.ms-default-vertical-tabs .tab.skeleton{background:#ebebeb;padding:16px 24px}.ms-pill-vertical-tabs .tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-pill-vertical-tabs input[type=radio]{display:none}.ms-pill-vertical-tabs .tab{padding:7px 12px;border-radius:6px;background:#fff;color:#1b1f22;border:1px solid #0084FF;cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-pill-vertical-tabs .tab:hover{background:#f5f5f5;color:#1b1f22}.ms-pill-vertical-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-line-tabs .ms-tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-line-tabs input[type=radio]{display:none}.ms-line-tabs .ms-tab{padding:7px 12px;background:none;color:#6a6b6d!important;border:0;cursor:pointer;font-size:14px;font-weight:450}.ms-line-tabs .ms-tab:hover{color:#1b1f22;border-bottom:2px solid #E0E0E0}.ms-line-tabs input[type=radio]:checked+.ms-tab{color:#1b1f22;border-bottom:2px solid #0084FF}.ms-line-tabs .ms-tab.disabled{color:#1b1f22;background:#ebebeb;border-radius:6px;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
3723
4098
|
}
|
|
3724
4099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTabs, decorators: [{
|
|
3725
4100
|
type: Component,
|
|
3726
|
-
args: [{ selector: 'ms-tabs', imports: [CommonModule, FormsModule], template: "@if(!skeleton && tabsType === 'horizontel'){\n@if(styleType === 'default'){\n<div class=\"ms-default-tabs\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-tabs\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n <div class=\"ms-tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}\n}@else if (!skeleton && tabsType === 'vertical'){\n@if(styleType === 'default'){\n<div class=\"ms-default-vertical-tabs\">\n <div class=\"tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-vertical-tabs\">\n <div class=\"tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n <div class=\"ms-tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}\n}@else if(skeleton){\n<div class=\"ms-default-tabs\">\n <div class=\"tabs\">\n <div class=\"tab skeleton\"></div>\n </div>\n</div>\n}" }]
|
|
4101
|
+
args: [{ selector: 'ms-tabs', imports: [CommonModule, FormsModule], template: "@if(!skeleton && tabsType === 'horizontel'){\n@if(styleType === 'default'){\n<div class=\"ms-default-tabs\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-tabs\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n <div class=\"ms-tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}\n}@else if (!skeleton && tabsType === 'vertical'){\n@if(styleType === 'default'){\n<div class=\"ms-default-vertical-tabs\">\n <div class=\"tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-vertical-tabs\">\n <div class=\"tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n <div class=\"ms-tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"groupName\" [checked]=\"item.checked\"\n (click)=\"onSelect(item )\" />\n <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}\n}@else if(skeleton){\n<div class=\"ms-default-tabs\">\n <div class=\"tabs\">\n <div class=\"tab skeleton\"></div>\n </div>\n</div>\n}", styles: [".ms-default-tabs .tabs{display:flex;gap:20px}.ms-default-tabs input[type=radio]{display:none}.ms-default-tabs .tab{padding:7px 12px;border-radius:6px;color:#6a6b6d!important;border:1px solid rgba(42,47,58,0);cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-default-tabs .tab:hover{background:#f5f5f5;color:#1b1f22!important}.ms-default-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-default-tabs .tab.disabled{background:#ebebeb;color:#ababab!important;cursor:not-allowed;pointer-events:none}.ms-default-tabs .tab.disabled{color:#1b1f22;background:#ebebeb;border-radius:6px;cursor:not-allowed;pointer-events:none}.ms-default-tabs .tab.skeleton{background:#ebebeb;padding:7px 24px}.ms-pill-tabs .tabs{display:flex;gap:20px}.ms-pill-tabs input[type=radio]{display:none}.ms-pill-tabs .tab{padding:7px 12px;border-radius:6px;background:#fff;color:#1b1f22;border:1px solid #0084FF;cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-pill-tabs .tab:hover{background:#f5f5f5;color:#1b1f22}.ms-pill-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-pill-tabs .tab.disabled{color:#1b1f22;background:#ebebeb;border-radius:6px;cursor:not-allowed;pointer-events:none}.ms-line-tabs .ms-tabs{display:flex;gap:20px}.ms-line-tabs .ms-tab:hover{color:#1b1f22!important;border-bottom:2px solid #E0E0E0}.ms-line-tabs input[type=radio]:checked+.ms-tab{color:#1b1f22!important;border-bottom:2px solid #0084FF}.ms-line-tabs .ms-tab.disabled{color:#1b1f22;border-radius:6px;cursor:not-allowed;pointer-events:none}.ms-default-vertical-tabs .tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-default-vertical-tabs input[type=radio]{display:none}.ms-default-vertical-tabs .tab{padding:7px 12px;border-radius:6px;color:#6a6b6d!important;border:1px solid rgba(42,47,58,0);cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-default-vertical-tabs .tab:hover{background:#f5f5f5;color:#1b1f22!important}.ms-default-vertical-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-default-vertical-tabs .tab.disabled{background:#ebebeb;color:#ababab!important;cursor:not-allowed;pointer-events:none}.ms-default-vertical-tabs .tab.skeleton{background:#ebebeb;padding:16px 24px}.ms-pill-vertical-tabs .tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-pill-vertical-tabs input[type=radio]{display:none}.ms-pill-vertical-tabs .tab{padding:7px 12px;border-radius:6px;background:#fff;color:#1b1f22;border:1px solid #0084FF;cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-pill-vertical-tabs .tab:hover{background:#f5f5f5;color:#1b1f22}.ms-pill-vertical-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-line-tabs .ms-tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-line-tabs input[type=radio]{display:none}.ms-line-tabs .ms-tab{padding:7px 12px;background:none;color:#6a6b6d!important;border:0;cursor:pointer;font-size:14px;font-weight:450}.ms-line-tabs .ms-tab:hover{color:#1b1f22;border-bottom:2px solid #E0E0E0}.ms-line-tabs input[type=radio]:checked+.ms-tab{color:#1b1f22;border-bottom:2px solid #0084FF}.ms-line-tabs .ms-tab.disabled{color:#1b1f22;background:#ebebeb;border-radius:6px;cursor:not-allowed;pointer-events:none}\n"] }]
|
|
3727
4102
|
}], propDecorators: { tabsType: [{
|
|
3728
4103
|
type: Input
|
|
3729
4104
|
}], styleType: [{
|
|
@@ -3793,11 +4168,11 @@ class MsToaster {
|
|
|
3793
4168
|
clearTimeout(this.timeoutId);
|
|
3794
4169
|
}
|
|
3795
4170
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsToaster, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3796
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsToaster, isStandalone: true, selector: "ms-toaster", inputs: { type: "type", icon: "icon", title: "title", message: "message", duration: "duration", position: "position" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"ms-toaster-wrapper\" [ngClass]=\"position\">\n <div class=\"ms-toaster-container\" [ngClass]=\"type\">\n <div class=\"ms-content-wrapper\">\n <div class=\"ms-icon-section icon-2x ms-me-2\">\n @if(type !== 'danger') {\n <ms-icon [name]=\"getIconClass()\" [color]=\"'ms-icon-white'\"></ms-icon>\n }\n @if (type === 'danger') {\n <ms-icon [name]=\"'
|
|
4171
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsToaster, isStandalone: true, selector: "ms-toaster", inputs: { type: "type", icon: "icon", title: "title", message: "message", duration: "duration", position: "position" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"ms-toaster-wrapper\" [ngClass]=\"position\">\n <div class=\"ms-toaster-container\" [ngClass]=\"type\">\n <div class=\"ms-content-wrapper\">\n <div class=\"ms-icon-section icon-2x ms-me-2\">\n @if(type !== 'danger') {\n <ms-icon [name]=\"getIconClass()\" [color]=\"'ms-icon-white'\"></ms-icon>\n }\n @if (type === 'danger') {\n <ms-icon [name]=\"'info-circle'\" [color]=\"'ms-icon-white'\"></ms-icon>\n }\n </div>\n <div class=\"ms-text-section\">\n @if(title) {\n <h4 class=\"ms-toaster-title\">{{ title }}</h4>\n }\n <p class=\"ms-toaster-message\">{{ message }}</p>\n </div>\n </div>\n <div class=\"ms-action-section\">\n <button class=\"ms-close-btn\" (click)=\"closeToaster()\">\u00D7</button>\n </div>\n </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
3797
4172
|
}
|
|
3798
4173
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsToaster, decorators: [{
|
|
3799
4174
|
type: Component,
|
|
3800
|
-
args: [{ selector: 'ms-toaster', imports: [CommonModule, MsIcon], template: "<div class=\"ms-toaster-wrapper\" [ngClass]=\"position\">\n <div class=\"ms-toaster-container\" [ngClass]=\"type\">\n <div class=\"ms-content-wrapper\">\n <div class=\"ms-icon-section icon-2x ms-me-2\">\n @if(type !== 'danger') {\n <ms-icon [name]=\"getIconClass()\" [color]=\"'ms-icon-white'\"></ms-icon>\n }\n @if (type === 'danger') {\n <ms-icon [name]=\"'
|
|
4175
|
+
args: [{ selector: 'ms-toaster', imports: [CommonModule, MsIcon], template: "<div class=\"ms-toaster-wrapper\" [ngClass]=\"position\">\n <div class=\"ms-toaster-container\" [ngClass]=\"type\">\n <div class=\"ms-content-wrapper\">\n <div class=\"ms-icon-section icon-2x ms-me-2\">\n @if(type !== 'danger') {\n <ms-icon [name]=\"getIconClass()\" [color]=\"'ms-icon-white'\"></ms-icon>\n }\n @if (type === 'danger') {\n <ms-icon [name]=\"'info-circle'\" [color]=\"'ms-icon-white'\"></ms-icon>\n }\n </div>\n <div class=\"ms-text-section\">\n @if(title) {\n <h4 class=\"ms-toaster-title\">{{ title }}</h4>\n }\n <p class=\"ms-toaster-message\">{{ message }}</p>\n </div>\n </div>\n <div class=\"ms-action-section\">\n <button class=\"ms-close-btn\" (click)=\"closeToaster()\">\u00D7</button>\n </div>\n </div>\n</div>" }]
|
|
3801
4176
|
}], propDecorators: { type: [{
|
|
3802
4177
|
type: Input
|
|
3803
4178
|
}], icon: [{
|
|
@@ -4144,6 +4519,7 @@ class MsDatePicker {
|
|
|
4144
4519
|
this.leftMonth = new Date().getMonth();
|
|
4145
4520
|
this.leftYear = new Date().getFullYear();
|
|
4146
4521
|
this.dateChange.emit(this.singleDateValue);
|
|
4522
|
+
this.showCalendar = false;
|
|
4147
4523
|
}
|
|
4148
4524
|
if (this.mode === 'range') {
|
|
4149
4525
|
if (this.dateType === 'daterange') {
|
|
@@ -4422,12 +4798,15 @@ class MsDatePicker {
|
|
|
4422
4798
|
const regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
|
|
4423
4799
|
this.singleDateValue = regex.test(value) ? value : '';
|
|
4424
4800
|
}
|
|
4801
|
+
onCalendarClose() {
|
|
4802
|
+
this.showCalendar = false;
|
|
4803
|
+
}
|
|
4425
4804
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDatePicker, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDatePicker, isStandalone: true, selector: "ms-date-picker", inputs: { required: "required", readonly: "readonly", pattern: "pattern", skeleton: "skeleton", prefix: "prefix", dateType: "dateType", disabled: "disabled", invalid: "invalid", selectedSate: "selectedSate", minDate: "minDate", maxDate: "maxDate", mode: "mode" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "window:scroll": "onWindowScroll()", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div #container class=\"ms-d-flex ms-flex-column ms-input-field-container\">\n<!-- [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\"\n [class.ms-has-focus]=\"selectedSate === 'ms-focus'\" -->\n <div *ngIf=\"dateType == 'datepicker'\" class=\"ms-date-field\" [class.ms-has-prefix-container]=\"prefix\">\n <input type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [class.disabled]=\"disabled\" [disabled]=\"disabled\"\n (click)=\"onInputClick($event)\" [attr.aria-invalid]=\"invalid\" [class.ms-hover]=\"selectedSate == 'ms-hover'\" [class.ms-error]=\"selectedSate == 'ms-error'\" [class.ms-focus]=\"selectedSate == 'ms-focus'\" [(ngModel)]=\"singleDate\"
|
|
4805
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDatePicker, isStandalone: true, selector: "ms-date-picker", inputs: { required: "required", readonly: "readonly", pattern: "pattern", skeleton: "skeleton", prefix: "prefix", dateType: "dateType", disabled: "disabled", invalid: "invalid", selectedSate: "selectedSate", minDate: "minDate", maxDate: "maxDate", mode: "mode" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "window:scroll": "onWindowScroll()", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div #container class=\"ms-d-flex ms-flex-column ms-input-field-container\">\n<!-- [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\"\n [class.ms-has-focus]=\"selectedSate === 'ms-focus'\" -->\n <div *ngIf=\"dateType == 'datepicker'\" class=\"ms-date-field\" [class.ms-has-prefix-container]=\"prefix\">\n <input type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [class.disabled]=\"disabled\" [disabled]=\"disabled\"\n (click)=\"onInputClick($event)\" [attr.aria-invalid]=\"invalid\" [class.ms-hover]=\"selectedSate == 'ms-hover'\" \n [class.ms-error]=\"selectedSate == 'ms-error'\" [class.ms-focus]=\"selectedSate == 'ms-focus'\" \n [(ngModel)]=\"singleDate\" [class.ms-file-uploader-skeleton]=\"skeleton\" \n (input)=\"onSingleDateInput($event)\">\n </div>\n <div *ngIf=\"dateType == 'datepicker-icon'\" class=\"ms-date-range-dual-wrapper\" [class.ms-has-suffix]=\"true\"\n [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\" [class.ms-has-focus]=\"selectedSate === 'ms-focus'\">\n\n <input #inputRef type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"singleDate\"\n [attr.aria-invalid]=\"invalid\" [class.ms-hover]=\"selectedSate == 'ms-hover'\" [class.ms-error]=\"selectedSate == 'ms-error'\" [class.ms-focus]=\"selectedSate == 'ms-focus'\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onSingleDateInput($event)\">\n <span class=\"ms-date-suffix\" (click)=\"open('single')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType == 'daterange'\" class=\"ms-date-range-dual-wrapper\">\n <input #inputRef type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"Select a range\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"rangeDate\"\n [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onRangeDateInput($event)\" maxlength=\"23\">\n <span class=\"ms-date-suffix\" (click)=\"open('range')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType === 'daterange-dual'\" class=\"ms-date-range-from-to-wrapper\">\n <div>\n <label>From</label>\n <div class=\"ms-date-wrapper ms-me-3 ms-mt-2\">\n <input type=\"text\" class=\"ms-date-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\"\n [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"selectedSate\" [(ngModel)]=\"fromDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'from')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n <div>\n <label>To</label>\n <!-- TO DATE -->\n <div class=\"ms-date-wrapper ms-mt-2\">\n\n <input type=\"text\" class=\"ms-date-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\"\n [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"selectedSate\" [(ngModel)]=\"toDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'to')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n\n </div>\n\n\n <app-calendar *ngIf=\"showCalendar\" [mode]=\"mode\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\n (close)=\"onCalendarClose()\"\n [fromDate]=\"fromDate\" [toDate]=\"toDate\" [leftMonth]=\"leftMonth\" [leftYear]=\"leftYear\" [rightMonth]=\"rightMonth\"\n [rightYear]=\"rightYear\" [ngStyle]=\"calendarStyle\">\n </app-calendar>\n</div>", styles: [".ms-date-field,.ms-date-range-dual-wrapper,.ms-date-wrapper{display:flex;align-items:center;position:relative;width:240px;height:36px;background-color:#fff;padding:0;overflow:hidden;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background-color .2s;z-index:0}.ms-date-range-from-to-wrapper{display:flex;align-items:center;position:relative;background-color:#fff;padding:0;overflow:hidden;box-sizing:border-box;z-index:0}.ms-date-form-control{flex:1;border:none;outline:none;height:100%;font-size:14px;font-weight:500;color:#374151;background-color:transparent;padding:0 12px;box-sizing:border-box;z-index:2;border-radius:6px;border:1px solid #E0E0E0}.ms-date-form-control:hover:not(:disabled,.ms-error):not(:focus){border-color:#0084ff;box-shadow:none!important}.ms-date-form-control:focus:not(:disabled,.ms-error){border-color:#0084ff;box-shadow:0 0 0 2px #0052cc33}.ms-date-form-control.ms-has-prefix{padding-left:40px}.ms-date-form-control.ms-has-suffix{padding-right:40px}.ms-date-form-control:disabled{color:#9ca3af;cursor:not-allowed;background:#f5f5f5}.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0052cc33}.ms-error{box-shadow:0 0 0 1px #da3e3740;border-color:#dc2626}.ms-date-prefix,.ms-date-suffix{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;z-index:3}.ms-date-prefix img,.ms-date-suffix img{width:16px;height:16px}.ms-date-prefix{left:12px}.ms-date-suffix{right:12px}.ms-hover{border:1px solid #0084FF;box-shadow:none}.ms-date-field,.ms-date-wrapper,.ms-date-range-dual-wrapper{display:flex;align-items:center;border-radius:4px;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0}app-calendar{position:absolute;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Calendar, selector: "app-calendar", inputs: ["mode", "selectedDate", "fromDate", "toDate", "leftMonth", "leftYear", "rightMonth", "rightYear"], outputs: ["dateChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MsDesignSystemModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
4427
4806
|
}
|
|
4428
4807
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDatePicker, decorators: [{
|
|
4429
4808
|
type: Component,
|
|
4430
|
-
args: [{ selector: 'ms-date-picker', imports: [CommonModule, Calendar, FormsModule, MsDesignSystemModule], template: "<div #container class=\"ms-d-flex ms-flex-column ms-input-field-container\">\n<!-- [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\"\n [class.ms-has-focus]=\"selectedSate === 'ms-focus'\" -->\n <div *ngIf=\"dateType == 'datepicker'\" class=\"ms-date-field\" [class.ms-has-prefix-container]=\"prefix\">\n <input type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [class.disabled]=\"disabled\" [disabled]=\"disabled\"\n (click)=\"onInputClick($event)\" [attr.aria-invalid]=\"invalid\" [class.ms-hover]=\"selectedSate == 'ms-hover'\" [class.ms-error]=\"selectedSate == 'ms-error'\" [class.ms-focus]=\"selectedSate == 'ms-focus'\" [(ngModel)]=\"singleDate\"
|
|
4809
|
+
args: [{ selector: 'ms-date-picker', imports: [CommonModule, Calendar, FormsModule, MsDesignSystemModule], template: "<div #container class=\"ms-d-flex ms-flex-column ms-input-field-container\">\n<!-- [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\"\n [class.ms-has-focus]=\"selectedSate === 'ms-focus'\" -->\n <div *ngIf=\"dateType == 'datepicker'\" class=\"ms-date-field\" [class.ms-has-prefix-container]=\"prefix\">\n <input type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [class.disabled]=\"disabled\" [disabled]=\"disabled\"\n (click)=\"onInputClick($event)\" [attr.aria-invalid]=\"invalid\" [class.ms-hover]=\"selectedSate == 'ms-hover'\" \n [class.ms-error]=\"selectedSate == 'ms-error'\" [class.ms-focus]=\"selectedSate == 'ms-focus'\" \n [(ngModel)]=\"singleDate\" [class.ms-file-uploader-skeleton]=\"skeleton\" \n (input)=\"onSingleDateInput($event)\">\n </div>\n <div *ngIf=\"dateType == 'datepicker-icon'\" class=\"ms-date-range-dual-wrapper\" [class.ms-has-suffix]=\"true\"\n [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\" [class.ms-has-focus]=\"selectedSate === 'ms-focus'\">\n\n <input #inputRef type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"singleDate\"\n [attr.aria-invalid]=\"invalid\" [class.ms-hover]=\"selectedSate == 'ms-hover'\" [class.ms-error]=\"selectedSate == 'ms-error'\" [class.ms-focus]=\"selectedSate == 'ms-focus'\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onSingleDateInput($event)\">\n <span class=\"ms-date-suffix\" (click)=\"open('single')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType == 'daterange'\" class=\"ms-date-range-dual-wrapper\">\n <input #inputRef type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"Select a range\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"rangeDate\"\n [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onRangeDateInput($event)\" maxlength=\"23\">\n <span class=\"ms-date-suffix\" (click)=\"open('range')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType === 'daterange-dual'\" class=\"ms-date-range-from-to-wrapper\">\n <div>\n <label>From</label>\n <div class=\"ms-date-wrapper ms-me-3 ms-mt-2\">\n <input type=\"text\" class=\"ms-date-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\"\n [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"selectedSate\" [(ngModel)]=\"fromDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'from')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n <div>\n <label>To</label>\n <!-- TO DATE -->\n <div class=\"ms-date-wrapper ms-mt-2\">\n\n <input type=\"text\" class=\"ms-date-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\"\n [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"selectedSate\" [(ngModel)]=\"toDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'to')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n\n </div>\n\n\n <app-calendar *ngIf=\"showCalendar\" [mode]=\"mode\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\n (close)=\"onCalendarClose()\"\n [fromDate]=\"fromDate\" [toDate]=\"toDate\" [leftMonth]=\"leftMonth\" [leftYear]=\"leftYear\" [rightMonth]=\"rightMonth\"\n [rightYear]=\"rightYear\" [ngStyle]=\"calendarStyle\">\n </app-calendar>\n</div>", styles: [".ms-date-field,.ms-date-range-dual-wrapper,.ms-date-wrapper{display:flex;align-items:center;position:relative;width:240px;height:36px;background-color:#fff;padding:0;overflow:hidden;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background-color .2s;z-index:0}.ms-date-range-from-to-wrapper{display:flex;align-items:center;position:relative;background-color:#fff;padding:0;overflow:hidden;box-sizing:border-box;z-index:0}.ms-date-form-control{flex:1;border:none;outline:none;height:100%;font-size:14px;font-weight:500;color:#374151;background-color:transparent;padding:0 12px;box-sizing:border-box;z-index:2;border-radius:6px;border:1px solid #E0E0E0}.ms-date-form-control:hover:not(:disabled,.ms-error):not(:focus){border-color:#0084ff;box-shadow:none!important}.ms-date-form-control:focus:not(:disabled,.ms-error){border-color:#0084ff;box-shadow:0 0 0 2px #0052cc33}.ms-date-form-control.ms-has-prefix{padding-left:40px}.ms-date-form-control.ms-has-suffix{padding-right:40px}.ms-date-form-control:disabled{color:#9ca3af;cursor:not-allowed;background:#f5f5f5}.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0052cc33}.ms-error{box-shadow:0 0 0 1px #da3e3740;border-color:#dc2626}.ms-date-prefix,.ms-date-suffix{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;z-index:3}.ms-date-prefix img,.ms-date-suffix img{width:16px;height:16px}.ms-date-prefix{left:12px}.ms-date-suffix{right:12px}.ms-hover{border:1px solid #0084FF;box-shadow:none}.ms-date-field,.ms-date-wrapper,.ms-date-range-dual-wrapper{display:flex;align-items:center;border-radius:4px;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0}app-calendar{position:absolute;z-index:1000}\n"] }]
|
|
4431
4810
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { container: [{
|
|
4432
4811
|
type: ViewChild,
|
|
4433
4812
|
args: ['container']
|