ms-design-system 0.0.1
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.
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import * as i1 from '@angular/common';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { Input, Component } from '@angular/core';
|
|
5
|
+
import * as i2 from '@angular/forms';
|
|
6
|
+
import { FormsModule } from '@angular/forms';
|
|
7
|
+
|
|
8
|
+
class ButtonComponent {
|
|
9
|
+
cdr;
|
|
10
|
+
selectedVariant = 'primary';
|
|
11
|
+
selectedSize = 'xs';
|
|
12
|
+
selectedRadius = 'medium';
|
|
13
|
+
buttonText = 'Label';
|
|
14
|
+
selectedIcon = '';
|
|
15
|
+
isDisabled = false;
|
|
16
|
+
iconPosition = 'prefix';
|
|
17
|
+
iconOnly = false;
|
|
18
|
+
latestButtonHtml = '';
|
|
19
|
+
copied = false;
|
|
20
|
+
type = 'button';
|
|
21
|
+
// ngOnInit() {
|
|
22
|
+
// this.initSections();
|
|
23
|
+
// }
|
|
24
|
+
constructor(cdr) {
|
|
25
|
+
this.cdr = cdr;
|
|
26
|
+
}
|
|
27
|
+
/** Called when ms-button emits new HTML */
|
|
28
|
+
onButtonHtmlChange(html) {
|
|
29
|
+
this.latestButtonHtml = html;
|
|
30
|
+
}
|
|
31
|
+
copyHtml(html) {
|
|
32
|
+
this.copied = true;
|
|
33
|
+
navigator.clipboard.writeText(html).then(() => {
|
|
34
|
+
setTimeout(() => {
|
|
35
|
+
this.copied = false;
|
|
36
|
+
this.cdr.detectChanges();
|
|
37
|
+
}, 1000);
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
// @Input() type: 'button' | 'submit' | 'reset' = 'button';
|
|
41
|
+
// @Input() variant: string = 'primary';
|
|
42
|
+
// @Input() size: string = 'md';
|
|
43
|
+
// @Input() radiussize: string = 'none';
|
|
44
|
+
block = false;
|
|
45
|
+
// @Input() disabled: boolean = false;
|
|
46
|
+
// @Input() textSrc: string = 'Button';
|
|
47
|
+
// // Icon support
|
|
48
|
+
// @Input() icon: string | null = null; // e.g. 'fa fa-plus' or 'bi bi-search'
|
|
49
|
+
// @Input() iconPosition: IconPosition = 'prefix'; // 'prefix' or 'suffix'
|
|
50
|
+
// @Input() iconOnly: boolean = false; // icon-only mode (no text)
|
|
51
|
+
// @Output() htmlChange = new EventEmitter<string>();
|
|
52
|
+
// /** Dynamic class computation */
|
|
53
|
+
get classes() {
|
|
54
|
+
const radiusClass = this.selectedRadius !== 'none' ? `rounded-${this.selectedRadius}` : '';
|
|
55
|
+
const classList = [
|
|
56
|
+
'ms-btn',
|
|
57
|
+
'd-flex',
|
|
58
|
+
`ms-btn-${this.selectedVariant}`,
|
|
59
|
+
`ms-btn-${this.selectedSize}`,
|
|
60
|
+
radiusClass,
|
|
61
|
+
this.block ? 'block' : '',
|
|
62
|
+
this.iconOnly ? 'icon-only' : ''
|
|
63
|
+
];
|
|
64
|
+
return classList.filter(Boolean).join(' ').trim();
|
|
65
|
+
}
|
|
66
|
+
// /** Generate HTML string */
|
|
67
|
+
getHtmlString() {
|
|
68
|
+
const disabledAttr = this.isDisabled ? ' disabled' : '';
|
|
69
|
+
const iconHtml = this.selectedIcon
|
|
70
|
+
? `<i class="${this.selectedIcon}"></i>`
|
|
71
|
+
: '';
|
|
72
|
+
let innerHtml = '';
|
|
73
|
+
if (this.iconOnly) {
|
|
74
|
+
// Icon-only → just icon, centered
|
|
75
|
+
innerHtml = `<i class="${this.selectedIcon} btn-icon"></i>`;
|
|
76
|
+
}
|
|
77
|
+
else if (this.selectedIcon && this.iconPosition === 'prefix') {
|
|
78
|
+
// Prefix → icon before text
|
|
79
|
+
innerHtml = `<i class="${this.selectedIcon} btn-icon prefix"></i> ${this.buttonText}`;
|
|
80
|
+
}
|
|
81
|
+
else if (this.selectedIcon && this.iconPosition === 'suffix') {
|
|
82
|
+
// Suffix → icon after text
|
|
83
|
+
innerHtml = `${this.buttonText} <i class="${this.selectedIcon} btn-icon suffix"></i>`;
|
|
84
|
+
}
|
|
85
|
+
else {
|
|
86
|
+
// Text only
|
|
87
|
+
innerHtml = this.buttonText;
|
|
88
|
+
}
|
|
89
|
+
return `<button type="${this.type}" class="${this.classes}"${disabledAttr}>${innerHtml}</button>`;
|
|
90
|
+
}
|
|
91
|
+
ngOnChanges(changes) {
|
|
92
|
+
// this.htmlChange.emit(this.getHtmlString());
|
|
93
|
+
}
|
|
94
|
+
ngOnInit() {
|
|
95
|
+
// this.htmlChange.emit(this.getHtmlString());
|
|
96
|
+
}
|
|
97
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
98
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ButtonComponent, isStandalone: true, selector: "ms-button", inputs: { block: "block" }, usesOnChanges: true, ngImport: i0, template: "<!-- <button [type]=\"type\" [disabled]=\"disabled\" [class]=\"classes\">\r\n\r\n @if (icon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\r\n }\r\n\r\n @if (!iconOnly) {\r\n <span>{{ textSrc }}</span>\r\n }\r\n\r\n @if (icon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\r\n }\r\n</button> -->\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"controls\">\r\n <label>Variant:</label>\r\n <select [(ngModel)]=\"selectedVariant\">\r\n <option value=\"default\">Default</option>\r\n <option value=\"primary\">Primary</option>\r\n <option value=\"warn\">Warn</option>\r\n <option value=\"label\">Label</option>\r\n <option value=\"success\">Success</option>\r\n <option value=\"danger\">Danger</option>\r\n <option value=\"pressed\">Pressed</option>\r\n <option value=\"focus\">Focus</option>\r\n </select>\r\n\r\n <label>Size:</label>\r\n <select [(ngModel)]=\"selectedSize\">\r\n <option value=\"xs\">Extra Small</option>\r\n <option value=\"sm\">Small</option>\r\n <option value=\"md\">Medium</option>\r\n <option value=\"lg\">Large</option>\r\n </select>\r\n\r\n <label>Radius:</label>\r\n <select [(ngModel)]=\"selectedRadius\">\r\n <option value=\"none\">None</option>\r\n <option value=\"small\">Small</option>\r\n <option value=\"medium\">Medium</option>\r\n <option value=\"large\">Large</option>\r\n <option value=\"circle\">Circle</option>\r\n </select>\r\n\r\n <label>Text:</label>\r\n <input type=\"text\" [(ngModel)]=\"buttonText\" placeholder=\"Button text\" />\r\n\r\n <label>\r\n <input type=\"checkbox\" [(ngModel)]=\"isDisabled\" /> Disabled\r\n </label>\r\n <label for=\"iconSelect\">Select Icon:</label>\r\n <select id=\"iconSelect\" [(ngModel)]=\"selectedIcon\">\r\n <option value=\"\">None</option>\r\n <option value=\"fa fa-plus\">Plus</option>\r\n <option value=\"fa fa-check\">Check</option>\r\n <option value=\"fa fa-times\">Times / Close</option>\r\n <option value=\"fa fa-trash\">Trash</option>\r\n <option value=\"fa fa-edit\">Edit</option>\r\n <option value=\"fa fa-arrow-right\">Arrow Right</option>\r\n <option value=\"fa fa-arrow-down\">Down</option>\r\n <option value=\"fa fa-arrow-left\">Arrow Left</option>\r\n <option value=\"fa fa-download\">Download</option>\r\n <option value=\"fa fa-upload\">Upload</option>\r\n <option value=\"fa fa-heart\">Heart</option>\r\n <option value=\"fa fa-star\">Star</option>\r\n <option value=\"fa fa-user\">User</option>\r\n <option value=\"fa fa-lock\">Lock</option>\r\n <option value=\"fa fa-search\">Search</option>\r\n <option value=\"fa fa-cog\">Settings / Cog</option>\r\n </select>\r\n\r\n\r\n <label>Icon Position:</label>\r\n <select [(ngModel)]=\"iconPosition\">\r\n <option value=\"prefix\">Prefix</option>\r\n <option value=\"suffix\">Suffix</option>\r\n </select>\r\n\r\n <label>Icon Only:</label>\r\n <input type=\"checkbox\" [(ngModel)]=\"iconOnly\" />\r\n</div>\r\n\r\n\r\n<!-- <ms-button [variant]=\"selectedVariant\" [size]=\"selectedSize\" [radiussize]=\"selectedRadius\" [textSrc]=\"buttonText\"\r\n [icon]=\"selectedIcon\" [disabled]=\"isDisabled\" [iconPosition]=\"iconPosition\" [iconOnly]=\"iconOnly\"\r\n (htmlChange)=\"onButtonHtmlChange($event)\">\r\n</ms-button> -->\r\n<button [disabled]=\"isDisabled\" [class]=\"classes\">\r\n\r\n @if (selectedIcon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [selectedIcon, 'btn-icon'] : [selectedIcon, 'btn-icon', 'prefix']\"></i>\r\n }\r\n\r\n @if (!iconOnly) {\r\n <span>{{ buttonText }}</span>\r\n }\r\n\r\n @if (selectedIcon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [selectedIcon, 'btn-icon'] : [selectedIcon, 'btn-icon', 'suffix']\"></i>\r\n }\r\n</button>\r\n\r\n<h3>Generated HTML Code:</h3>\r\n<div class=\"code-block\">\r\n <code>{{ getHtmlString() }}</code>\r\n</div>\r\n\r\n<button class=\"copy-btn\" (click)=\"copyHtml(getHtmlString())\">\r\n {{ copied ? 'Copied!' : 'Copy' }}\r\n</button> \r\n\r\n", styles: [".ms-btn{font-weight:500;cursor:pointer;border:none;padding:8px 16px;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease-in-out}.ms-btn-xs{padding:2px 8px;font-size:.75rem;min-height:28px}.ms-btn-xs.icon-only{height:28px;padding:0;font-size:.75rem}.ms-btn-sm{padding:4px 10px;font-size:.875rem;min-height:32px}.ms-btn-sm.icon-only{width:32px;height:32px;padding:0;font-size:.875rem}.ms-btn-md{padding:8px 16px;font-size:1rem;min-height:40px}.ms-btn-md.icon-only{width:40px;height:40px;padding:0;font-size:1rem}.ms-btn-lg{padding:12px 24px;font-size:1.125rem;min-height:48px}.ms-btn-lg.icon-only{width:48px;height:48px;padding:0;font-size:1.125rem}.ms-btn-default{border:2px solid #CCCCCC;background:#fff;color:#1b1f22}.ms-btn-primary{background:#0084ff;color:#fff}.ms-btn-hover{background:#f5f5f5;color:#1b1f22}.ms-btn-success{background:#28a745;color:#fff}.ms-btn-danger{background:#da3e37;color:#fff}.ms-btn-warn{background:#f58600;color:#fff}.ms-btn-pressed{background:#ebebeb;color:#1b1f22}.ms-btn-focus{background:transparent;border:thin solid #0084FF;color:#1b1f22}.ms-btn-label{background:transparent;color:#1b1f22}.rounded-small{border-radius:4px}.rounded-medium{border-radius:8px}.rounded-large{border-radius:12px}.rounded-circle{border-radius:50px}.d-flex{display:inline}.ms-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px);background:#f5f5f5;color:#1b1f22}.ms-btn:disabled{opacity:.6;cursor:not-allowed}.ms-btn i{display:inline-flex;align-items:center;justify-content:center;font-size:1em}.ms-btn i.prefix{margin-right:.5rem}.ms-btn i.suffix{margin-left:.5rem}.ms-btn.icon-only{padding:8px;justify-content:center;text-align:center}.btn-icon{display:inline-flex;align-items:center;justify-content:center;font-size:1em}.section{border:1px solid #ccc;padding:16px;border-radius:8px}.button-group ms-button{margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] });
|
|
99
|
+
}
|
|
100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
101
|
+
type: Component,
|
|
102
|
+
args: [{ selector: 'ms-button', imports: [CommonModule, FormsModule,], template: "<!-- <button [type]=\"type\" [disabled]=\"disabled\" [class]=\"classes\">\r\n\r\n @if (icon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\r\n }\r\n\r\n @if (!iconOnly) {\r\n <span>{{ textSrc }}</span>\r\n }\r\n\r\n @if (icon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\r\n }\r\n</button> -->\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"controls\">\r\n <label>Variant:</label>\r\n <select [(ngModel)]=\"selectedVariant\">\r\n <option value=\"default\">Default</option>\r\n <option value=\"primary\">Primary</option>\r\n <option value=\"warn\">Warn</option>\r\n <option value=\"label\">Label</option>\r\n <option value=\"success\">Success</option>\r\n <option value=\"danger\">Danger</option>\r\n <option value=\"pressed\">Pressed</option>\r\n <option value=\"focus\">Focus</option>\r\n </select>\r\n\r\n <label>Size:</label>\r\n <select [(ngModel)]=\"selectedSize\">\r\n <option value=\"xs\">Extra Small</option>\r\n <option value=\"sm\">Small</option>\r\n <option value=\"md\">Medium</option>\r\n <option value=\"lg\">Large</option>\r\n </select>\r\n\r\n <label>Radius:</label>\r\n <select [(ngModel)]=\"selectedRadius\">\r\n <option value=\"none\">None</option>\r\n <option value=\"small\">Small</option>\r\n <option value=\"medium\">Medium</option>\r\n <option value=\"large\">Large</option>\r\n <option value=\"circle\">Circle</option>\r\n </select>\r\n\r\n <label>Text:</label>\r\n <input type=\"text\" [(ngModel)]=\"buttonText\" placeholder=\"Button text\" />\r\n\r\n <label>\r\n <input type=\"checkbox\" [(ngModel)]=\"isDisabled\" /> Disabled\r\n </label>\r\n <label for=\"iconSelect\">Select Icon:</label>\r\n <select id=\"iconSelect\" [(ngModel)]=\"selectedIcon\">\r\n <option value=\"\">None</option>\r\n <option value=\"fa fa-plus\">Plus</option>\r\n <option value=\"fa fa-check\">Check</option>\r\n <option value=\"fa fa-times\">Times / Close</option>\r\n <option value=\"fa fa-trash\">Trash</option>\r\n <option value=\"fa fa-edit\">Edit</option>\r\n <option value=\"fa fa-arrow-right\">Arrow Right</option>\r\n <option value=\"fa fa-arrow-down\">Down</option>\r\n <option value=\"fa fa-arrow-left\">Arrow Left</option>\r\n <option value=\"fa fa-download\">Download</option>\r\n <option value=\"fa fa-upload\">Upload</option>\r\n <option value=\"fa fa-heart\">Heart</option>\r\n <option value=\"fa fa-star\">Star</option>\r\n <option value=\"fa fa-user\">User</option>\r\n <option value=\"fa fa-lock\">Lock</option>\r\n <option value=\"fa fa-search\">Search</option>\r\n <option value=\"fa fa-cog\">Settings / Cog</option>\r\n </select>\r\n\r\n\r\n <label>Icon Position:</label>\r\n <select [(ngModel)]=\"iconPosition\">\r\n <option value=\"prefix\">Prefix</option>\r\n <option value=\"suffix\">Suffix</option>\r\n </select>\r\n\r\n <label>Icon Only:</label>\r\n <input type=\"checkbox\" [(ngModel)]=\"iconOnly\" />\r\n</div>\r\n\r\n\r\n<!-- <ms-button [variant]=\"selectedVariant\" [size]=\"selectedSize\" [radiussize]=\"selectedRadius\" [textSrc]=\"buttonText\"\r\n [icon]=\"selectedIcon\" [disabled]=\"isDisabled\" [iconPosition]=\"iconPosition\" [iconOnly]=\"iconOnly\"\r\n (htmlChange)=\"onButtonHtmlChange($event)\">\r\n</ms-button> -->\r\n<button [disabled]=\"isDisabled\" [class]=\"classes\">\r\n\r\n @if (selectedIcon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [selectedIcon, 'btn-icon'] : [selectedIcon, 'btn-icon', 'prefix']\"></i>\r\n }\r\n\r\n @if (!iconOnly) {\r\n <span>{{ buttonText }}</span>\r\n }\r\n\r\n @if (selectedIcon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [selectedIcon, 'btn-icon'] : [selectedIcon, 'btn-icon', 'suffix']\"></i>\r\n }\r\n</button>\r\n\r\n<h3>Generated HTML Code:</h3>\r\n<div class=\"code-block\">\r\n <code>{{ getHtmlString() }}</code>\r\n</div>\r\n\r\n<button class=\"copy-btn\" (click)=\"copyHtml(getHtmlString())\">\r\n {{ copied ? 'Copied!' : 'Copy' }}\r\n</button> \r\n\r\n", styles: [".ms-btn{font-weight:500;cursor:pointer;border:none;padding:8px 16px;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease-in-out}.ms-btn-xs{padding:2px 8px;font-size:.75rem;min-height:28px}.ms-btn-xs.icon-only{height:28px;padding:0;font-size:.75rem}.ms-btn-sm{padding:4px 10px;font-size:.875rem;min-height:32px}.ms-btn-sm.icon-only{width:32px;height:32px;padding:0;font-size:.875rem}.ms-btn-md{padding:8px 16px;font-size:1rem;min-height:40px}.ms-btn-md.icon-only{width:40px;height:40px;padding:0;font-size:1rem}.ms-btn-lg{padding:12px 24px;font-size:1.125rem;min-height:48px}.ms-btn-lg.icon-only{width:48px;height:48px;padding:0;font-size:1.125rem}.ms-btn-default{border:2px solid #CCCCCC;background:#fff;color:#1b1f22}.ms-btn-primary{background:#0084ff;color:#fff}.ms-btn-hover{background:#f5f5f5;color:#1b1f22}.ms-btn-success{background:#28a745;color:#fff}.ms-btn-danger{background:#da3e37;color:#fff}.ms-btn-warn{background:#f58600;color:#fff}.ms-btn-pressed{background:#ebebeb;color:#1b1f22}.ms-btn-focus{background:transparent;border:thin solid #0084FF;color:#1b1f22}.ms-btn-label{background:transparent;color:#1b1f22}.rounded-small{border-radius:4px}.rounded-medium{border-radius:8px}.rounded-large{border-radius:12px}.rounded-circle{border-radius:50px}.d-flex{display:inline}.ms-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px);background:#f5f5f5;color:#1b1f22}.ms-btn:disabled{opacity:.6;cursor:not-allowed}.ms-btn i{display:inline-flex;align-items:center;justify-content:center;font-size:1em}.ms-btn i.prefix{margin-right:.5rem}.ms-btn i.suffix{margin-left:.5rem}.ms-btn.icon-only{padding:8px;justify-content:center;text-align:center}.btn-icon{display:inline-flex;align-items:center;justify-content:center;font-size:1em}.section{border:1px solid #ccc;padding:16px;border-radius:8px}.button-group ms-button{margin-bottom:8px}\n"] }]
|
|
103
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { block: [{
|
|
104
|
+
type: Input
|
|
105
|
+
}] } });
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Generated bundle index. Do not edit.
|
|
109
|
+
*/
|
|
110
|
+
|
|
111
|
+
export { ButtonComponent };
|
|
112
|
+
//# sourceMappingURL=ms-design-system.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ms-design-system.mjs","sources":["../../../projects/ui-library/src/components/button/button.component.ts","../../../projects/ui-library/src/components/button/button.component.html","../../../projects/ui-library/src/ms-design-system.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'ms-button',\r\n imports: [ CommonModule, FormsModule,],\r\n templateUrl: './button.component.html',\r\n styleUrls: ['./button.component.scss']\r\n})\r\nexport class ButtonComponent {\r\n selectedVariant = 'primary';\r\n selectedSize = 'xs';\r\n selectedRadius = 'medium';\r\n buttonText = 'Label';\r\n selectedIcon: string = ''; \r\n isDisabled = false;\r\n iconPosition: 'prefix' | 'suffix' = 'prefix';\r\niconOnly: boolean = false;\r\nlatestButtonHtml: string = '';\r\n copied = false;\r\n type: 'button' | 'submit' | 'reset' = 'button'\r\n// ngOnInit() {\r\n // this.initSections();\r\n// }\r\n constructor(private cdr: ChangeDetectorRef) {}\r\n\r\n /** Called when ms-button emits new HTML */\r\n onButtonHtmlChange(html: string) {\r\n this.latestButtonHtml = html;\r\n }\r\n\r\n copyHtml(html: string) {\r\n\r\n this.copied = true;\r\n navigator.clipboard.writeText(html).then(() => {\r\n setTimeout(() => {\r\n this.copied = false;\r\n this.cdr.detectChanges();\r\n }, 1000);\r\n });\r\n\r\n\r\n }\r\n // @Input() type: 'button' | 'submit' | 'reset' = 'button';\r\n // @Input() variant: string = 'primary';\r\n // @Input() size: string = 'md';\r\n // @Input() radiussize: string = 'none';\r\n @Input() block: boolean = false;\r\n // @Input() disabled: boolean = false;\r\n // @Input() textSrc: string = 'Button';\r\n\r\n // // Icon support\r\n // @Input() icon: string | null = null; // e.g. 'fa fa-plus' or 'bi bi-search'\r\n // @Input() iconPosition: IconPosition = 'prefix'; // 'prefix' or 'suffix'\r\n // @Input() iconOnly: boolean = false; // icon-only mode (no text)\r\n\r\n // @Output() htmlChange = new EventEmitter<string>();\r\n\r\n// /** Dynamic class computation */\r\n get classes(): string {\r\n const radiusClass = this.selectedRadius !== 'none' ? `rounded-${this.selectedRadius}` : '';\r\n\r\n const classList = [\r\n 'ms-btn',\r\n 'd-flex',\r\n `ms-btn-${this.selectedVariant}`,\r\n `ms-btn-${this.selectedSize}`,\r\n radiusClass,\r\n this.block ? 'block' : '',\r\n this.iconOnly ? 'icon-only' : ''\r\n ];\r\n\r\n return classList.filter(Boolean).join(' ').trim();\r\n }\r\n\r\n// /** Generate HTML string */\r\n getHtmlString(): string {\r\n const disabledAttr = this.isDisabled ? ' disabled' : '';\r\n const iconHtml = this.selectedIcon\r\n ? `<i class=\"${this.selectedIcon}\"></i>`\r\n : '';\r\n\r\n let innerHtml = '';\r\n\r\nif (this.iconOnly) {\r\n // Icon-only → just icon, centered\r\n innerHtml = `<i class=\"${this.selectedIcon} btn-icon\"></i>`;\r\n} \r\nelse if (this.selectedIcon && this.iconPosition === 'prefix') {\r\n // Prefix → icon before text\r\n innerHtml = `<i class=\"${this.selectedIcon} btn-icon prefix\"></i> ${this.buttonText}`;\r\n} \r\nelse if (this.selectedIcon && this.iconPosition === 'suffix') {\r\n // Suffix → icon after text\r\n innerHtml = `${this.buttonText} <i class=\"${this.selectedIcon} btn-icon suffix\"></i>`;\r\n} \r\nelse {\r\n // Text only\r\n innerHtml = this.buttonText;\r\n}\r\n\r\n\r\n return `<button type=\"${this.type}\" class=\"${this.classes}\"${disabledAttr}>${innerHtml}</button>`;\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n // this.htmlChange.emit(this.getHtmlString());\r\n }\r\n\r\n ngOnInit(): void {\r\n // this.htmlChange.emit(this.getHtmlString());\r\n }\r\n \r\n}\r\n\r\n","<!-- <button [type]=\"type\" [disabled]=\"disabled\" [class]=\"classes\">\r\n\r\n @if (icon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\r\n }\r\n\r\n @if (!iconOnly) {\r\n <span>{{ textSrc }}</span>\r\n }\r\n\r\n @if (icon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\r\n }\r\n</button> -->\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"controls\">\r\n <label>Variant:</label>\r\n <select [(ngModel)]=\"selectedVariant\">\r\n <option value=\"default\">Default</option>\r\n <option value=\"primary\">Primary</option>\r\n <option value=\"warn\">Warn</option>\r\n <option value=\"label\">Label</option>\r\n <option value=\"success\">Success</option>\r\n <option value=\"danger\">Danger</option>\r\n <option value=\"pressed\">Pressed</option>\r\n <option value=\"focus\">Focus</option>\r\n </select>\r\n\r\n <label>Size:</label>\r\n <select [(ngModel)]=\"selectedSize\">\r\n <option value=\"xs\">Extra Small</option>\r\n <option value=\"sm\">Small</option>\r\n <option value=\"md\">Medium</option>\r\n <option value=\"lg\">Large</option>\r\n </select>\r\n\r\n <label>Radius:</label>\r\n <select [(ngModel)]=\"selectedRadius\">\r\n <option value=\"none\">None</option>\r\n <option value=\"small\">Small</option>\r\n <option value=\"medium\">Medium</option>\r\n <option value=\"large\">Large</option>\r\n <option value=\"circle\">Circle</option>\r\n </select>\r\n\r\n <label>Text:</label>\r\n <input type=\"text\" [(ngModel)]=\"buttonText\" placeholder=\"Button text\" />\r\n\r\n <label>\r\n <input type=\"checkbox\" [(ngModel)]=\"isDisabled\" /> Disabled\r\n </label>\r\n <label for=\"iconSelect\">Select Icon:</label>\r\n <select id=\"iconSelect\" [(ngModel)]=\"selectedIcon\">\r\n <option value=\"\">None</option>\r\n <option value=\"fa fa-plus\">Plus</option>\r\n <option value=\"fa fa-check\">Check</option>\r\n <option value=\"fa fa-times\">Times / Close</option>\r\n <option value=\"fa fa-trash\">Trash</option>\r\n <option value=\"fa fa-edit\">Edit</option>\r\n <option value=\"fa fa-arrow-right\">Arrow Right</option>\r\n <option value=\"fa fa-arrow-down\">Down</option>\r\n <option value=\"fa fa-arrow-left\">Arrow Left</option>\r\n <option value=\"fa fa-download\">Download</option>\r\n <option value=\"fa fa-upload\">Upload</option>\r\n <option value=\"fa fa-heart\">Heart</option>\r\n <option value=\"fa fa-star\">Star</option>\r\n <option value=\"fa fa-user\">User</option>\r\n <option value=\"fa fa-lock\">Lock</option>\r\n <option value=\"fa fa-search\">Search</option>\r\n <option value=\"fa fa-cog\">Settings / Cog</option>\r\n </select>\r\n\r\n\r\n <label>Icon Position:</label>\r\n <select [(ngModel)]=\"iconPosition\">\r\n <option value=\"prefix\">Prefix</option>\r\n <option value=\"suffix\">Suffix</option>\r\n </select>\r\n\r\n <label>Icon Only:</label>\r\n <input type=\"checkbox\" [(ngModel)]=\"iconOnly\" />\r\n</div>\r\n\r\n\r\n<!-- <ms-button [variant]=\"selectedVariant\" [size]=\"selectedSize\" [radiussize]=\"selectedRadius\" [textSrc]=\"buttonText\"\r\n [icon]=\"selectedIcon\" [disabled]=\"isDisabled\" [iconPosition]=\"iconPosition\" [iconOnly]=\"iconOnly\"\r\n (htmlChange)=\"onButtonHtmlChange($event)\">\r\n</ms-button> -->\r\n<button [disabled]=\"isDisabled\" [class]=\"classes\">\r\n\r\n @if (selectedIcon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [selectedIcon, 'btn-icon'] : [selectedIcon, 'btn-icon', 'prefix']\"></i>\r\n }\r\n\r\n @if (!iconOnly) {\r\n <span>{{ buttonText }}</span>\r\n }\r\n\r\n @if (selectedIcon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [selectedIcon, 'btn-icon'] : [selectedIcon, 'btn-icon', 'suffix']\"></i>\r\n }\r\n</button>\r\n\r\n<h3>Generated HTML Code:</h3>\r\n<div class=\"code-block\">\r\n <code>{{ getHtmlString() }}</code>\r\n</div>\r\n\r\n<button class=\"copy-btn\" (click)=\"copyHtml(getHtmlString())\">\r\n {{ copied ? 'Copied!' : 'Copy' }}\r\n</button> \r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "ms-design-system",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"main": "src/index.ts",
|
|
5
|
+
"peerDependencies": {
|
|
6
|
+
"@angular/common": "^21.0.0",
|
|
7
|
+
"@angular/core": "^21.0.0"
|
|
8
|
+
},
|
|
9
|
+
"module": "fesm2022/ms-design-system.mjs",
|
|
10
|
+
"typings": "types/ms-design-system.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
"./package.json": {
|
|
13
|
+
"default": "./package.json"
|
|
14
|
+
},
|
|
15
|
+
".": {
|
|
16
|
+
"types": "./types/ms-design-system.d.ts",
|
|
17
|
+
"default": "./fesm2022/ms-design-system.mjs"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"sideEffects": false,
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"tslib": "^2.3.0"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { ChangeDetectorRef, SimpleChanges } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
declare class ButtonComponent {
|
|
5
|
+
private cdr;
|
|
6
|
+
selectedVariant: string;
|
|
7
|
+
selectedSize: string;
|
|
8
|
+
selectedRadius: string;
|
|
9
|
+
buttonText: string;
|
|
10
|
+
selectedIcon: string;
|
|
11
|
+
isDisabled: boolean;
|
|
12
|
+
iconPosition: 'prefix' | 'suffix';
|
|
13
|
+
iconOnly: boolean;
|
|
14
|
+
latestButtonHtml: string;
|
|
15
|
+
copied: boolean;
|
|
16
|
+
type: 'button' | 'submit' | 'reset';
|
|
17
|
+
constructor(cdr: ChangeDetectorRef);
|
|
18
|
+
/** Called when ms-button emits new HTML */
|
|
19
|
+
onButtonHtmlChange(html: string): void;
|
|
20
|
+
copyHtml(html: string): void;
|
|
21
|
+
block: boolean;
|
|
22
|
+
get classes(): string;
|
|
23
|
+
getHtmlString(): string;
|
|
24
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
25
|
+
ngOnInit(): void;
|
|
26
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
|
|
27
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ms-button", never, { "block": { "alias": "block"; "required": false; }; }, {}, never, never, true, never>;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export { ButtonComponent };
|