@sd-angular/core 19.0.0-beta.11 → 19.0.0-beta.13
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/components/avatar/src/avatar.component.d.ts +3 -3
- package/fesm2022/sd-angular-core-components-avatar.mjs +5 -5
- package/fesm2022/sd-angular-core-components-avatar.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-document-builder.mjs +15 -24
- package/fesm2022/sd-angular-core-components-document-builder.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-autocomplete.mjs +2 -2
- package/fesm2022/sd-angular-core-forms-autocomplete.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-date.mjs +2 -2
- package/fesm2022/sd-angular-core-forms-date.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-datetime.mjs +2 -2
- package/fesm2022/sd-angular-core-forms-datetime.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-input-number.mjs +2 -2
- package/fesm2022/sd-angular-core-forms-input-number.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-input.mjs +2 -2
- package/fesm2022/sd-angular-core-forms-input.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-radio.mjs +2 -2
- package/fesm2022/sd-angular-core-forms-radio.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-select.mjs +2 -2
- package/fesm2022/sd-angular-core-forms-select.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-textarea.mjs +2 -2
- package/fesm2022/sd-angular-core-forms-textarea.mjs.map +1 -1
- package/package.json +54 -54
- package/sd-angular-core-19.0.0-beta.13.tgz +0 -0
- package/sd-angular-core-19.0.0-beta.11.tgz +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { OnInit } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
-
export declare class
|
|
3
|
+
export declare class SdAvatar implements OnInit {
|
|
4
4
|
#private;
|
|
5
5
|
src: string | undefined | null;
|
|
6
6
|
size: number;
|
|
@@ -9,6 +9,6 @@ export declare class SdAvatarComponent implements OnInit {
|
|
|
9
9
|
bgColor: string;
|
|
10
10
|
ngOnInit(): void;
|
|
11
11
|
handleError(): void;
|
|
12
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<
|
|
13
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<
|
|
12
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SdAvatar, never>;
|
|
13
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdAvatar, "sd-avatar", never, { "src": { "alias": "src"; "required": true; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
|
|
14
14
|
}
|
|
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
|
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
|
|
5
|
-
class
|
|
5
|
+
class SdAvatar {
|
|
6
6
|
src;
|
|
7
7
|
size = 32;
|
|
8
8
|
isUrl = false;
|
|
@@ -67,10 +67,10 @@ class SdAvatarComponent {
|
|
|
67
67
|
}
|
|
68
68
|
return colors[Math.abs(hash) % colors.length];
|
|
69
69
|
};
|
|
70
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type:
|
|
71
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type:
|
|
70
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
71
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAvatar, isStandalone: true, selector: "sd-avatar", inputs: { src: "src", size: "size" }, ngImport: i0, template: "<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n @if (isUrl) {\r\n <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n } @else {\r\n <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n {{ initials }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
72
72
|
}
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type:
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAvatar, decorators: [{
|
|
74
74
|
type: Component,
|
|
75
75
|
args: [{ selector: 'sd-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n @if (isUrl) {\r\n <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n } @else {\r\n <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n {{ initials }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"] }]
|
|
76
76
|
}], propDecorators: { src: [{
|
|
@@ -84,5 +84,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
84
84
|
* Generated bundle index. Do not edit.
|
|
85
85
|
*/
|
|
86
86
|
|
|
87
|
-
export {
|
|
87
|
+
export { SdAvatar };
|
|
88
88
|
//# sourceMappingURL=sd-angular-core-components-avatar.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-angular-core-components-avatar.mjs","sources":["../../../projects/sd-angular/components/avatar/src/avatar.component.ts","../../../projects/sd-angular/components/avatar/src/avatar.component.html","../../../projects/sd-angular/components/avatar/sd-angular-core-components-avatar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sd-avatar',\r\n standalone: true,\r\n imports: [CommonModule],\r\n templateUrl: './avatar.component.html',\r\n styleUrls: ['./avatar.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class
|
|
1
|
+
{"version":3,"file":"sd-angular-core-components-avatar.mjs","sources":["../../../projects/sd-angular/components/avatar/src/avatar.component.ts","../../../projects/sd-angular/components/avatar/src/avatar.component.html","../../../projects/sd-angular/components/avatar/sd-angular-core-components-avatar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sd-avatar',\r\n standalone: true,\r\n imports: [CommonModule],\r\n templateUrl: './avatar.component.html',\r\n styleUrls: ['./avatar.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdAvatar implements OnInit {\r\n @Input({ required: true }) src: string | undefined | null;\r\n @Input() size: number = 32;\r\n\r\n isUrl: boolean = false;\r\n initials: string = '';\r\n bgColor: string = '#ccc';\r\n\r\n ngOnInit(): void {\r\n this.#init();\r\n }\r\n\r\n #init = () => {\r\n if (!this.src) {\r\n this.isUrl = false;\r\n this.initials = '?';\r\n this.bgColor = '#bdc3c7';\r\n return;\r\n }\r\n // Kiểm tra xem src có phải là URL (http, https, data:image, hoặc path /)\r\n const urlPattern = /^(http|https|data:image|\\/)/;\r\n this.isUrl = urlPattern.test(this.src);\r\n if (!this.isUrl) {\r\n this.initials = this.#getInitials(this.src);\r\n this.bgColor = this.#generateColor(this.src);\r\n }\r\n };\r\n\r\n handleError() {\r\n this.src = undefined; // Nếu ảnh lỗi, chuyển sang hiển thị initials\r\n this.#init();\r\n }\r\n\r\n #getInitials = (name: string): string => {\r\n return name\r\n .trim()\r\n .split(' ')\r\n .map(n => n[0])\r\n .join('')\r\n .toUpperCase()\r\n .substring(0, 2);\r\n };\r\n\r\n #generateColor = (name: string): string => {\r\n const colors = [\r\n '#1abc9c',\r\n '#2ecc71',\r\n '#3498db',\r\n '#9b59b6',\r\n '#34495e',\r\n '#16a085',\r\n '#27ae60',\r\n '#2980b9',\r\n '#8e44ad',\r\n '#2c3e50',\r\n '#f1c40f',\r\n '#e67e22',\r\n '#e74c3c',\r\n '#95a5a6',\r\n '#f39c12',\r\n '#d35400',\r\n '#c0392b',\r\n '#bdc3c7',\r\n '#7f8c8d',\r\n ];\r\n let hash = 0;\r\n for (let i = 0; i < name.length; i++) {\r\n hash = name.charCodeAt(i) + ((hash << 5) - hash);\r\n }\r\n return colors[Math.abs(hash) % colors.length];\r\n };\r\n}\r\n","<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n @if (isUrl) {\r\n <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n } @else {\r\n <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n {{ initials }}\r\n </span>\r\n }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -253,8 +253,8 @@ class VariablePlugin extends Plugin {
|
|
|
253
253
|
isObject: true,
|
|
254
254
|
allowAttributes: ['id', 'uuid', 'value', 'display'],
|
|
255
255
|
});
|
|
256
|
-
//
|
|
257
|
-
conversion.for('
|
|
256
|
+
// 2. Model -> HTML
|
|
257
|
+
conversion.for('downcast').elementToElement({
|
|
258
258
|
model: 'variable',
|
|
259
259
|
view: (modelItem, { writer: viewWriter }) => {
|
|
260
260
|
const id = modelItem.getAttribute('id');
|
|
@@ -273,31 +273,22 @@ class VariablePlugin extends Plugin {
|
|
|
273
273
|
return toWidget(widgetElement, viewWriter);
|
|
274
274
|
},
|
|
275
275
|
});
|
|
276
|
-
//
|
|
277
|
-
conversion.for('dataDowncast').elementToElement({
|
|
278
|
-
model: 'variable',
|
|
279
|
-
view: (modelItem, { writer: viewWriter }) => {
|
|
280
|
-
const id = modelItem.getAttribute('id');
|
|
281
|
-
const uuid = modelItem.getAttribute('uuid');
|
|
282
|
-
const display = modelItem.getAttribute('display');
|
|
283
|
-
const value = modelItem.getAttribute('value');
|
|
284
|
-
const widgetElement = viewWriter.createContainerElement('span', {
|
|
285
|
-
class: 'variable-widget',
|
|
286
|
-
'data-id': id,
|
|
287
|
-
'data-uuid': uuid,
|
|
288
|
-
'data-value': value,
|
|
289
|
-
'data-display': display,
|
|
290
|
-
});
|
|
291
|
-
const innerText = viewWriter.createText(`{{${display}}}`);
|
|
292
|
-
viewWriter.insert(viewWriter.createPositionAt(widgetElement, 0), innerText);
|
|
293
|
-
return widgetElement;
|
|
294
|
-
},
|
|
295
|
-
});
|
|
296
|
-
// 3. HTML -> model của CDK
|
|
276
|
+
// 3. HTML -> Model
|
|
297
277
|
conversion.for('upcast').elementToElement({
|
|
278
|
+
// NOTE: Khi bổ sung thêm attribute vào element variable, dev nên bổ sung thêm "[atribute]: true" vào view
|
|
279
|
+
// Để:
|
|
280
|
+
// - Nếu lọc chính xác sẽ không sinh ra thẻ span thừa bọc ngoài
|
|
281
|
+
// - Nếu chưa bổ sung thì sẽ sinh ra thẻ <span> bọc ngoài kèm [atribute] chưa lọc
|
|
298
282
|
view: {
|
|
299
283
|
name: 'span',
|
|
300
|
-
classes: 'variable-widget',
|
|
284
|
+
classes: 'variable-widget ck-widget',
|
|
285
|
+
attributes: {
|
|
286
|
+
'data-id': true,
|
|
287
|
+
'data-uuid': true,
|
|
288
|
+
'data-value': true,
|
|
289
|
+
'data-display': true,
|
|
290
|
+
contenteditable: true,
|
|
291
|
+
},
|
|
301
292
|
},
|
|
302
293
|
model: (viewElement, { writer: modelWriter }) => {
|
|
303
294
|
return modelWriter.createElement('variable', {
|