ms-design-system 0.0.2 → 0.0.3
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.
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as i1 from '@angular/common';
|
|
2
1
|
import { CommonModule } from '@angular/common';
|
|
3
2
|
import * as i0 from '@angular/core';
|
|
4
3
|
import { EventEmitter, ContentChild, Output, Input, Component } from '@angular/core';
|
|
@@ -6,7 +5,7 @@ import { EventEmitter, ContentChild, Output, Input, Component } from '@angular/c
|
|
|
6
5
|
class MsButton {
|
|
7
6
|
el;
|
|
8
7
|
type = 'button';
|
|
9
|
-
variant = '
|
|
8
|
+
variant = '';
|
|
10
9
|
size = 'md';
|
|
11
10
|
radiussize = 'none';
|
|
12
11
|
block = false;
|
|
@@ -74,17 +73,16 @@ class MsButton {
|
|
|
74
73
|
}
|
|
75
74
|
ngAfterContentInit() {
|
|
76
75
|
const inner = this.el.nativeElement.innerText.trim();
|
|
77
|
-
console.log(inner, 'innerText');
|
|
78
76
|
if (inner && !this.textSrc) {
|
|
79
77
|
this.textSrc = inner;
|
|
80
78
|
}
|
|
81
79
|
}
|
|
82
80
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
83
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsButton, isStandalone: true, selector: "ms-button", inputs: { type: "type", variant: "variant", size: "size", radiussize: "radiussize", block: "block", disabled: "disabled", textSrc: "textSrc", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", class: "class" }, outputs: { htmlChange: "htmlChange" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<a [type]=\"type\"
|
|
81
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsButton, isStandalone: true, selector: "ms-button", inputs: { type: "type", variant: "variant", size: "size", radiussize: "radiussize", block: "block", disabled: "disabled", textSrc: "textSrc", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", class: "class" }, outputs: { htmlChange: "htmlChange" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\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 <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\r\n @if (!iconOnly && !textSrc) {\r\n <span><ng-content></ng-content></span>\r\n }\r\n\r\n <!-- If textSrc is given -->\r\n @if (!iconOnly && textSrc) {\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</a>", 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}.ms-me-2{margin-right:.5rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
84
82
|
}
|
|
85
83
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, decorators: [{
|
|
86
84
|
type: Component,
|
|
87
|
-
args: [{ selector: 'ms-button', imports: [CommonModule,], template: "<a [type]=\"type\"
|
|
85
|
+
args: [{ selector: 'ms-button', imports: [CommonModule,], template: "<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\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 <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\r\n @if (!iconOnly && !textSrc) {\r\n <span><ng-content></ng-content></span>\r\n }\r\n\r\n <!-- If textSrc is given -->\r\n @if (!iconOnly && textSrc) {\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</a>", 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}.ms-me-2{margin-right:.5rem!important}\n"] }]
|
|
88
86
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
|
|
89
87
|
type: Input
|
|
90
88
|
}], variant: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ms-design-system.mjs","sources":["../../../projects/ui-library/src/components/button/ms-button.component.ts","../../../projects/ui-library/src/components/button/ms-button.component.html","../../../projects/ui-library/src/ms-design-system.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';\r\n\r\n\r\ntype IconPosition = 'prefix' | 'suffix';\r\n\r\n@Component({\r\n selector: 'ms-button',\r\n imports: [CommonModule,],\r\n templateUrl: './ms-button.component.html',\r\n styleUrls: ['./ms-button.component.scss'],\r\n})\r\nexport class MsButton implements OnChanges {\r\n @Input() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Input() variant: string = '
|
|
1
|
+
{"version":3,"file":"ms-design-system.mjs","sources":["../../../projects/ui-library/src/components/button/ms-button.component.ts","../../../projects/ui-library/src/components/button/ms-button.component.html","../../../projects/ui-library/src/ms-design-system.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';\r\n\r\n\r\ntype IconPosition = 'prefix' | 'suffix';\r\n\r\n@Component({\r\n selector: 'ms-button',\r\n imports: [CommonModule,],\r\n templateUrl: './ms-button.component.html',\r\n styleUrls: ['./ms-button.component.scss'],\r\n})\r\nexport class MsButton implements OnChanges {\r\n @Input() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Input() variant: string = '';\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 = '';\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 @Input() class: string = '';\r\n @Output() htmlChange = new EventEmitter<string>();\r\n @ContentChild('projectedContent', { static: false }) projectedContent: any;\r\n /** Dynamic class computation */\r\n get classes(): string {\r\n const radiusClass = this.radiussize !== 'none' ? `rounded-${this.radiussize}` : '';\r\n\r\n return [\r\n `ms-btn`,\r\n `d-flex`,\r\n `ms-btn-${this.variant}`,\r\n `ms-btn-${this.size}`,\r\n radiusClass,\r\n this.block ? 'block' : '',\r\n this.iconOnly ? 'icon-only' : ''\r\n ]\r\n .filter(Boolean)\r\n .join(' ')\r\n .trim();\r\n }\r\n\r\n get userClass() {\r\n return this.class;\r\n }\r\n\r\n /** Generate HTML string */\r\n getHtmlString(): string {\r\n const disabledAttr = this.disabled ? ' disabled' : '';\r\n const iconHtml = this.icon\r\n ? `<i class=\"${this.icon}\"></i>`\r\n : '';\r\n\r\n let innerHtml = '';\r\n\r\n if (this.iconOnly) {\r\n // Icon-only → just icon, centered\r\n innerHtml = `<i class=\"${this.icon} btn-icon\"></i>`;\r\n }\r\n else if (this.icon && this.iconPosition === 'prefix') {\r\n // Prefix → icon before text\r\n innerHtml = `<i class=\"${this.icon} btn-icon prefix\"></i> ${this.textSrc}`;\r\n }\r\n else if (this.icon && this.iconPosition === 'suffix') {\r\n // Suffix → icon after text\r\n innerHtml = `${this.textSrc} <i class=\"${this.icon} btn-icon suffix\"></i>`;\r\n }\r\n else {\r\n // Text only\r\n innerHtml = this.textSrc;\r\n }\r\n\r\n\r\n return `<ms-button type=\"${this.type}\" class=\"${this.classes}\"${disabledAttr}>${innerHtml}</ms-button>`;\r\n }\r\n\r\n\r\n constructor(private el: ElementRef) { }\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 ngAfterContentInit() {\r\n const inner = this.el.nativeElement.innerText.trim();\r\n if (inner && !this.textSrc) {\r\n this.textSrc = inner;\r\n }\r\n }\r\n\r\n}\r\n\r\n","<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\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 <!-- 👇 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\r\n @if (!iconOnly && !textSrc) {\r\n <span><ng-content></ng-content></span>\r\n }\r\n\r\n <!-- If textSrc is given -->\r\n @if (!iconOnly && textSrc) {\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</a>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAYa,QAAQ,CAAA;AAsEC,IAAA,EAAA;IArEX,IAAI,GAAkC,QAAQ;IAC9C,OAAO,GAAW,EAAE;IACpB,IAAI,GAAW,IAAI;IACnB,UAAU,GAAW,MAAM;IAC3B,KAAK,GAAY,KAAK;IACtB,QAAQ,GAAY,KAAK;IACzB,OAAO,GAAW,EAAE;;AAGpB,IAAA,IAAI,GAAkB,IAAI,CAAC;AAC3B,IAAA,YAAY,GAAiB,QAAQ,CAAC;AACtC,IAAA,QAAQ,GAAY,KAAK,CAAC;IAE1B,KAAK,GAAW,EAAE;AACjB,IAAA,UAAU,GAAG,IAAI,YAAY,EAAU;AACI,IAAA,gBAAgB;;AAErE,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,KAAK,MAAM,GAAG,CAAA,QAAA,EAAW,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,EAAE;QAElF,OAAO;YACL,CAAA,MAAA,CAAQ;YACR,CAAA,MAAA,CAAQ;YACR,CAAA,OAAA,EAAU,IAAI,CAAC,OAAO,CAAA,CAAE;YACxB,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,CAAE;YACrB,WAAW;YACX,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG;AAC/B;aACE,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG;AACR,aAAA,IAAI,EAAE;IACX;AAEA,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,KAAK;IACnB;;IAGA,aAAa,GAAA;AACX,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE;AACrD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC;AACpB,cAAE,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,CAAA,MAAA;cACtB,EAAE;QAEN,IAAI,SAAS,GAAG,EAAE;AAElB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;;AAEjB,YAAA,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,iBAAiB;QACrD;aACK,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE;;YAEpD,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,0BAA0B,IAAI,CAAC,OAAO,CAAA,CAAE;QAC5E;aACK,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE;;YAEpD,SAAS,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,IAAI,CAAA,sBAAA,CAAwB;QAC5E;aACK;;AAEH,YAAA,SAAS,GAAG,IAAI,CAAC,OAAO;QAC1B;AAGA,QAAA,OAAO,CAAA,iBAAA,EAAoB,IAAI,CAAC,IAAI,CAAA,SAAA,EAAY,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,YAAY,CAAA,CAAA,EAAI,SAAS,cAAc;IACzG;AAGA,IAAA,WAAA,CAAoB,EAAc,EAAA;QAAd,IAAA,CAAA,EAAE,GAAF,EAAE;IAAgB;AAGtC,IAAA,WAAW,CAAC,OAAsB,EAAA;QAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5C;IAEA,QAAQ,GAAA;QACN,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5C;IAEA,kBAAkB,GAAA;AAChB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,IAAI,EAAE;AACpD,QAAA,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AAC1B,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;QACtB;IACF;uGAtFW,QAAQ,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,YAAA,EAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZrB,qrBAmBI,EAAA,MAAA,EAAA,CAAA,i4DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDXQ,YAAY,EAAA,CAAA,EAAA,CAAA;;2FAIX,QAAQ,EAAA,UAAA,EAAA,CAAA;kBANpB,SAAS;+BACE,WAAW,EAAA,OAAA,EACZ,CAAC,YAAY,EAAE,EAAA,QAAA,EAAA,qrBAAA,EAAA,MAAA,EAAA,CAAA,i4DAAA,CAAA,EAAA;;sBAKvB;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBAGA;;sBACA;;sBACA;;sBAEA;;sBACA;;sBACA,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,kBAAkB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;;AE5BrD;;AAEG;;;;"}
|