ms-design-system 0.0.14 → 0.0.15
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 +49 -30
- package/fesm2022/ms-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles.scss +138 -35
- package/types/ms-design-system.d.ts +5 -1
|
@@ -10,23 +10,31 @@ class MsButton {
|
|
|
10
10
|
radiussize = '';
|
|
11
11
|
block = false;
|
|
12
12
|
disabled = false;
|
|
13
|
+
isBorder = false;
|
|
13
14
|
textSrc = '';
|
|
14
15
|
// Icon support
|
|
15
16
|
icon = null; // e.g. 'fa fa-plus' or 'bi bi-search'
|
|
16
17
|
iconPosition = 'prefix'; // 'prefix' or 'suffix'
|
|
17
18
|
iconOnly = false; // icon-only mode (no text)
|
|
18
19
|
class = '';
|
|
20
|
+
buttonType = '';
|
|
19
21
|
htmlChange = new EventEmitter();
|
|
22
|
+
click = new EventEmitter();
|
|
20
23
|
projectedContent;
|
|
21
24
|
/** Dynamic class computation */
|
|
22
25
|
get classes() {
|
|
23
|
-
const radiusClass = this.radiussize !== 'none' ? `rounded-${this.radiussize}` : '';
|
|
26
|
+
const radiusClass = this.radiussize !== 'none' ? `ms-rounded-${this.radiussize}` : '';
|
|
27
|
+
const variant = this.variant !== 'default' ? `ms-btn-${this.variant}` : '';
|
|
28
|
+
const link = this.variant !== 'link' ? `ms-btn` : '';
|
|
29
|
+
const size = this.size !== '' ? `ms-btn-${this.size}` : '';
|
|
30
|
+
const isBorder = this.isBorder ? `ms-border` : '';
|
|
24
31
|
return [
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
32
|
+
link,
|
|
33
|
+
variant,
|
|
34
|
+
size,
|
|
28
35
|
radiusClass,
|
|
29
36
|
this.block ? 'block' : '',
|
|
37
|
+
isBorder,
|
|
30
38
|
this.iconOnly ? 'icon-only' : ''
|
|
31
39
|
]
|
|
32
40
|
.filter(Boolean)
|
|
@@ -66,49 +74,54 @@ class MsButton {
|
|
|
66
74
|
}
|
|
67
75
|
ngOnChanges(changes) {
|
|
68
76
|
this.htmlChange.emit(this.getHtmlString());
|
|
69
|
-
if
|
|
70
|
-
|
|
71
|
-
}
|
|
72
|
-
if
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}
|
|
77
|
+
// if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){
|
|
78
|
+
// this.radiussize = ''
|
|
79
|
+
// }
|
|
80
|
+
// if(this.variant === 'default'){
|
|
81
|
+
// this.variant = ''
|
|
82
|
+
// }else{
|
|
83
|
+
// this.variant = `-${this.variant}`
|
|
84
|
+
// }
|
|
78
85
|
}
|
|
79
86
|
ngOnInit() {
|
|
80
87
|
this.htmlChange.emit(this.getHtmlString());
|
|
81
|
-
if
|
|
82
|
-
|
|
83
|
-
}
|
|
84
|
-
if
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}
|
|
88
|
+
// if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){
|
|
89
|
+
// this.radiussize = ''
|
|
90
|
+
// }
|
|
91
|
+
// if(this.variant === 'default'){
|
|
92
|
+
// this.variant = ''
|
|
93
|
+
// }else{
|
|
94
|
+
// this.variant = `-${this.variant}`
|
|
95
|
+
// }
|
|
90
96
|
}
|
|
91
97
|
ngAfterContentInit() {
|
|
92
98
|
const inner = this.el.nativeElement.innerText.trim();
|
|
93
99
|
if (inner && !this.textSrc) {
|
|
94
100
|
this.textSrc = inner;
|
|
95
101
|
}
|
|
96
|
-
if
|
|
97
|
-
|
|
98
|
-
}
|
|
99
|
-
if
|
|
100
|
-
|
|
102
|
+
// if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){
|
|
103
|
+
// this.radiussize = ''
|
|
104
|
+
// }
|
|
105
|
+
// if(this.variant === 'default'){
|
|
106
|
+
// this.variant = ''
|
|
107
|
+
// }else{
|
|
108
|
+
// this.variant = `-${this.variant}`
|
|
109
|
+
// }
|
|
110
|
+
}
|
|
111
|
+
onClick(event) {
|
|
112
|
+
if (!this.disabled) {
|
|
113
|
+
this.click.emit(event);
|
|
101
114
|
}
|
|
102
115
|
else {
|
|
103
|
-
|
|
116
|
+
event.preventDefault();
|
|
104
117
|
}
|
|
105
118
|
}
|
|
106
119
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
-
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\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>", styles: [":root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;border-radius:8px;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-sm{border:1px solid transparent;border-radius:6px;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;border-radius:8px;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;border-radius:8px;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;border:1px solid #CCCCCC!important}.ms-btn-md{height:16px!important;padding:7px 12px!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}.ms-card-body{flex:1 1 auto!important;padding:16px!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-col-1{flex:0 0 auto!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 auto!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 auto!important;max-width:24.8%!important}.ms-col-4{flex:0 0 auto!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 auto!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 auto!important;max-width:50%!important}.ms-col-7{flex:0 0 auto!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 auto!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 auto!important;max-width:75%!important}.ms-col-10{flex:0 0 auto!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 auto!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 auto!important;max-width:100%!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-pt-0{padding-top:0!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}.ms-form-control{height:12px!important;gap:6!important;opacity:1!important;border-width:1px!important;padding:12px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-row{display:flex!important;flex-wrap:wrap!important}.ms-col-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 41.6667%!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-7{flex:0 0 58.3333%!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 66.6667%!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 75%!important;max-width:75%!important}.ms-col-10{flex:0 0 83.3333%!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 91.6667%!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 100%!important;max-width:100%!important}@media(min-width:576px){.ms-col-sm-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-sm-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-sm-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-sm-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-sm-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-sm-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:768px){.ms-col-md-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-md-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-md-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-md-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-md-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-md-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:992px){.ms-col-lg-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-lg-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-lg-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-lg-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-lg-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-lg-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:1200px){.ms-col-xl-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-xl-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-xl-6{flex:0 0 50%!important;max-width:50%!important}}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}ms-button a{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
120
|
+
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", isBorder: "isBorder", textSrc: "textSrc", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", class: "class", buttonType: "buttonType" }, outputs: { htmlChange: "htmlChange", click: "click" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}", styles: [":root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #CCCCCC!important}.ms-border-left{border-left:1px solid #CCCCCC!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-col-1{flex:0 0 auto!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 auto!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 auto!important;max-width:24.8%!important}.ms-col-4{flex:0 0 auto!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 auto!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 auto!important;max-width:50%!important}.ms-col-7{flex:0 0 auto!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 auto!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 auto!important;max-width:75%!important}.ms-col-10{flex:0 0 auto!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 auto!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 auto!important;max-width:100%!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-pt-0{padding-top:0!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}.ms-form-control{height:12px!important;gap:6!important;opacity:1!important;border-width:1px!important;padding:12px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-row{display:flex!important;flex-wrap:wrap!important}.ms-col-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 41.6667%!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-7{flex:0 0 58.3333%!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 66.6667%!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 75%!important;max-width:75%!important}.ms-col-10{flex:0 0 83.3333%!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 91.6667%!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 100%!important;max-width:100%!important}@media(min-width:576px){.ms-col-sm-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-sm-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-sm-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-sm-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-sm-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-sm-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:768px){.ms-col-md-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-md-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-md-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-md-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-md-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-md-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:992px){.ms-col-lg-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-lg-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-lg-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-lg-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-lg-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-lg-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:1200px){.ms-col-xl-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-xl-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-xl-6{flex:0 0 50%!important;max-width:50%!important}}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
108
121
|
}
|
|
109
122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, decorators: [{
|
|
110
123
|
type: Component,
|
|
111
|
-
args: [{ selector: 'ms-button', standalone: true, imports: [CommonModule], template: "<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>", styles: [":root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;border-radius:8px;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-sm{border:1px solid transparent;border-radius:6px;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;border-radius:8px;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;border-radius:8px;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;border:1px solid #CCCCCC!important}.ms-btn-md{height:16px!important;padding:7px 12px!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}.ms-card-body{flex:1 1 auto!important;padding:16px!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-col-1{flex:0 0 auto!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 auto!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 auto!important;max-width:24.8%!important}.ms-col-4{flex:0 0 auto!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 auto!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 auto!important;max-width:50%!important}.ms-col-7{flex:0 0 auto!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 auto!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 auto!important;max-width:75%!important}.ms-col-10{flex:0 0 auto!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 auto!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 auto!important;max-width:100%!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-pt-0{padding-top:0!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}.ms-form-control{height:12px!important;gap:6!important;opacity:1!important;border-width:1px!important;padding:12px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-row{display:flex!important;flex-wrap:wrap!important}.ms-col-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 41.6667%!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-7{flex:0 0 58.3333%!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 66.6667%!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 75%!important;max-width:75%!important}.ms-col-10{flex:0 0 83.3333%!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 91.6667%!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 100%!important;max-width:100%!important}@media(min-width:576px){.ms-col-sm-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-sm-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-sm-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-sm-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-sm-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-sm-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:768px){.ms-col-md-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-md-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-md-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-md-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-md-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-md-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:992px){.ms-col-lg-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-lg-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-lg-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-lg-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-lg-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-lg-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:1200px){.ms-col-xl-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-xl-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-xl-6{flex:0 0 50%!important;max-width:50%!important}}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}ms-button a{padding:0!important}\n"] }]
|
|
124
|
+
args: [{ selector: 'ms-button', imports: [CommonModule], template: "@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}", styles: [":root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #CCCCCC!important}.ms-border-left{border-left:1px solid #CCCCCC!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-col-1{flex:0 0 auto!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 auto!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 auto!important;max-width:24.8%!important}.ms-col-4{flex:0 0 auto!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 auto!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 auto!important;max-width:50%!important}.ms-col-7{flex:0 0 auto!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 auto!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 auto!important;max-width:75%!important}.ms-col-10{flex:0 0 auto!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 auto!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 auto!important;max-width:100%!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-pt-0{padding-top:0!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}.ms-form-control{height:12px!important;gap:6!important;opacity:1!important;border-width:1px!important;padding:12px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-row{display:flex!important;flex-wrap:wrap!important}.ms-col-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 41.6667%!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-7{flex:0 0 58.3333%!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 66.6667%!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 75%!important;max-width:75%!important}.ms-col-10{flex:0 0 83.3333%!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 91.6667%!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 100%!important;max-width:100%!important}@media(min-width:576px){.ms-col-sm-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-sm-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-sm-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-sm-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-sm-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-sm-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:768px){.ms-col-md-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-md-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-md-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-md-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-md-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-md-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:992px){.ms-col-lg-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-lg-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-lg-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-lg-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-lg-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-lg-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:1200px){.ms-col-xl-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-xl-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-xl-6{flex:0 0 50%!important;max-width:50%!important}}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}\n"] }]
|
|
112
125
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
|
|
113
126
|
type: Input
|
|
114
127
|
}], variant: [{
|
|
@@ -121,6 +134,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
121
134
|
type: Input
|
|
122
135
|
}], disabled: [{
|
|
123
136
|
type: Input
|
|
137
|
+
}], isBorder: [{
|
|
138
|
+
type: Input
|
|
124
139
|
}], textSrc: [{
|
|
125
140
|
type: Input
|
|
126
141
|
}], icon: [{
|
|
@@ -131,8 +146,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
131
146
|
type: Input
|
|
132
147
|
}], class: [{
|
|
133
148
|
type: Input
|
|
149
|
+
}], buttonType: [{
|
|
150
|
+
type: Input
|
|
134
151
|
}], htmlChange: [{
|
|
135
152
|
type: Output
|
|
153
|
+
}], click: [{
|
|
154
|
+
type: Output
|
|
136
155
|
}], projectedContent: [{
|
|
137
156
|
type: ContentChild,
|
|
138
157
|
args: ['projectedContent', { static: false }]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ms-design-system.mjs","sources":["../../../projects/ui-library/src/lib/components/button/ms-button.component.ts","../../../projects/ui-library/src/lib/components/button/ms-button.component.html","../../../projects/ui-library/src/lib/components/dropdown/dropdown.ts","../../../projects/ui-library/src/lib/components/dropdown/dropdown.html","../../../projects/ui-library/src/lib/ms-design-system.module.ts","../../../projects/ui-library/src/lib/providers/ms-design-system.ts","../../../projects/ui-library/src/lib/index.ts","../../../projects/ui-library/src/ms-design-system.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\n\n\ntype IconPosition = 'prefix' | 'suffix';\n\n@Component({\n selector: 'ms-button',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './ms-button.component.html',\n styleUrls: ['./ms-button.component.scss']\n})\nexport class MsButton implements OnChanges, OnInit {\n @Input() type: 'button' | 'submit' | 'reset' = 'button';\n @Input() variant: string = '';\n @Input() size: string = '';\n @Input() radiussize: string = '';\n @Input() block: boolean = false;\n @Input() disabled: boolean = false;\n @Input() textSrc: string = '';\n\n // Icon support\n @Input() icon: string | null = null; // e.g. 'fa fa-plus' or 'bi bi-search'\n @Input() iconPosition: IconPosition = 'prefix'; // 'prefix' or 'suffix'\n @Input() iconOnly: boolean = false; // icon-only mode (no text)\n\n @Input() class: string = '';\n @Output() htmlChange = new EventEmitter<string>();\n @ContentChild('projectedContent', { static: false }) projectedContent: any;\n /** Dynamic class computation */\n get classes(): string {\n const radiusClass = this.radiussize !== 'none' ? `rounded-${this.radiussize}` : '';\n\n return [\n `d-flex`,\n `ms-btn${this.variant}`,\n `ms-btn-${this.size}`,\n radiusClass,\n this.block ? 'block' : '',\n this.iconOnly ? 'icon-only' : ''\n ]\n .filter(Boolean)\n .join(' ')\n .trim();\n }\n\n get userClass() {\n return this.class;\n }\n\n /** Generate HTML string */\n getHtmlString(): string {\n const disabledAttr = this.disabled ? ' disabled' : '';\n const iconHtml = this.icon\n ? `<i class=\"${this.icon}\"></i>`\n : '';\n\n let innerHtml = '';\n\n if (this.iconOnly) {\n // Icon-only → just icon, centered\n innerHtml = `<i class=\"${this.icon} btn-icon\"></i>`;\n }\n else if (this.icon && this.iconPosition === 'prefix') {\n // Prefix → icon before text\n innerHtml = `<i class=\"${this.icon} btn-icon prefix\"></i> ${this.textSrc}`;\n }\n else if (this.icon && this.iconPosition === 'suffix') {\n // Suffix → icon after text\n innerHtml = `${this.textSrc} <i class=\"${this.icon} btn-icon suffix\"></i>`;\n }\n else {\n // Text only\n innerHtml = this.textSrc;\n }\n \n\n return `<ms-button type=\"${this.type}\" class=\"${this.classes}\"${disabledAttr}>${innerHtml}</ms-button>`;\n }\n\n\n constructor(private el: ElementRef) { }\n\n\n ngOnChanges(changes: SimpleChanges): void {\n this.htmlChange.emit(this.getHtmlString());\n if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){\n this.radiussize = ''\n }\n if(this.variant === 'default'){\n this.variant = ''\n }else{\n this.variant = `-${this.variant}`\n }\n }\n\n ngOnInit(): void {\n this.htmlChange.emit(this.getHtmlString());\n if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){\n this.radiussize = ''\n }\n if(this.variant === 'default'){\n this.variant = ''\n }else{\n this.variant = `-${this.variant}`\n }\n }\n\n ngAfterContentInit() {\n const inner = this.el.nativeElement.innerText.trim();\n if (inner && !this.textSrc) {\n this.textSrc = inner;\n }\n if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){\n this.radiussize = ''\n }\n if(this.variant === 'default'){\n this.variant = ''\n }else{\n this.variant = `-${this.variant}`\n }\n }\n\n}\n\n","<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- 👇 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>","import { CommonModule } from '@angular/common';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'ms-dropdown',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './dropdown.html',\n styleUrls: ['./dropdown.scss']\n})\nexport class MsDropdown {\n\n}\n","<p>dropdown works!</p>\n","import { NgModule } from '@angular/core';\nimport { MsButton } from './components/button/ms-button.component';\nimport { MsDropdown } from './components/dropdown/dropdown';\n\n@NgModule({\n imports: [MsButton, MsDropdown], // standalone components can be imported\n exports: [MsButton, MsDropdown]\n})\nexport class MsDesignSystemModule {}\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\n\nexport function provideMsDesignSystem(): EnvironmentProviders {\n return makeEnvironmentProviders([]);\n}\n","// Components\nexport * from './components/button/ms-button.component';\nexport * from './components/dropdown/dropdown';\n\n// NgModule\nexport * from './ms-design-system.module';\n\n// Providers\nexport * from './providers/ms-design-system';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ms-design-system.mjs","sources":["../../../projects/ui-library/src/lib/components/button/ms-button.component.ts","../../../projects/ui-library/src/lib/components/button/ms-button.component.html","../../../projects/ui-library/src/lib/components/dropdown/dropdown.ts","../../../projects/ui-library/src/lib/components/dropdown/dropdown.html","../../../projects/ui-library/src/lib/ms-design-system.module.ts","../../../projects/ui-library/src/lib/providers/ms-design-system.ts","../../../projects/ui-library/src/lib/index.ts","../../../projects/ui-library/src/ms-design-system.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\n\n\ntype IconPosition = 'prefix' | 'suffix';\n\n@Component({\n selector: 'ms-button',\n imports: [CommonModule],\n templateUrl: './ms-button.component.html',\n styleUrls: ['./ms-button.component.scss']\n})\nexport class MsButton implements OnChanges, OnInit {\n @Input() type: 'button' | 'submit' | 'reset' = 'button';\n @Input() variant: string = '';\n @Input() size: string = '';\n @Input() radiussize: string = '';\n @Input() block: boolean = false;\n @Input() disabled: boolean = false;\n @Input() isBorder: boolean = false;\n @Input() textSrc: string = '';\n\n // Icon support\n @Input() icon: string | null = null; // e.g. 'fa fa-plus' or 'bi bi-search'\n @Input() iconPosition: IconPosition = 'prefix'; // 'prefix' or 'suffix'\n @Input() iconOnly: boolean = false; // icon-only mode (no text)\n\n @Input() class: string = '';\n @Input() buttonType: string = '';\n @Output() htmlChange = new EventEmitter<string>();\n @Output() click = new EventEmitter<Event>();\n @ContentChild('projectedContent', { static: false }) projectedContent: any;\n /** Dynamic class computation */\n get classes(): string {\n const radiusClass = this.radiussize !== 'none' ? `ms-rounded-${this.radiussize}` : '';\n const variant = this.variant !== 'default' ? `ms-btn-${this.variant}` : '';\n const link = this.variant !== 'link' ? `ms-btn` : '';\n const size = this.size !== '' ? `ms-btn-${this.size}` : '';\n const isBorder = this.isBorder ? `ms-border` : '';\n return [\n link,\n variant,\n size,\n radiusClass,\n this.block ? 'block' : '',\n isBorder,\n this.iconOnly ? 'icon-only' : ''\n ]\n .filter(Boolean)\n .join(' ')\n .trim();\n }\n\n get userClass() {\n return this.class;\n }\n\n /** Generate HTML string */\n getHtmlString(): string {\n const disabledAttr = this.disabled ? ' disabled' : '';\n const iconHtml = this.icon\n ? `<i class=\"${this.icon}\"></i>`\n : '';\n\n let innerHtml = '';\n\n if (this.iconOnly) {\n // Icon-only → just icon, centered\n innerHtml = `<i class=\"${this.icon} btn-icon\"></i>`;\n }\n else if (this.icon && this.iconPosition === 'prefix') {\n // Prefix → icon before text\n innerHtml = `<i class=\"${this.icon} btn-icon prefix\"></i> ${this.textSrc}`;\n }\n else if (this.icon && this.iconPosition === 'suffix') {\n // Suffix → icon after text\n innerHtml = `${this.textSrc} <i class=\"${this.icon} btn-icon suffix\"></i>`;\n }\n else {\n // Text only\n innerHtml = this.textSrc;\n }\n \n\n return `<ms-button type=\"${this.type}\" class=\"${this.classes}\"${disabledAttr}>${innerHtml}</ms-button>`;\n }\n\n\n constructor(private el: ElementRef) { }\n\n\n ngOnChanges(changes: SimpleChanges): void {\n this.htmlChange.emit(this.getHtmlString());\n // if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){\n // this.radiussize = ''\n // }\n // if(this.variant === 'default'){\n // this.variant = ''\n // }else{\n // this.variant = `-${this.variant}`\n // }\n }\n\n ngOnInit(): void {\n this.htmlChange.emit(this.getHtmlString());\n // if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){\n // this.radiussize = ''\n // }\n // if(this.variant === 'default'){\n // this.variant = ''\n // }else{\n // this.variant = `-${this.variant}`\n // }\n }\n\n ngAfterContentInit() {\n const inner = this.el.nativeElement.innerText.trim();\n if (inner && !this.textSrc) {\n this.textSrc = inner;\n }\n // if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){\n // this.radiussize = ''\n // }\n // if(this.variant === 'default'){\n // this.variant = ''\n // }else{\n // this.variant = `-${this.variant}`\n // }\n }\n\n onClick(event: Event) {\n if (!this.disabled) {\n this.click.emit(event);\n } else {\n event.preventDefault();\n }\n }\n\n}\n\n","@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- 👇 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- 👇 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}","import { CommonModule } from '@angular/common';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'ms-dropdown',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './dropdown.html',\n styleUrls: ['./dropdown.scss']\n})\nexport class MsDropdown {\n\n}\n","<p>dropdown works!</p>\n","import { NgModule } from '@angular/core';\nimport { MsButton } from './components/button/ms-button.component';\nimport { MsDropdown } from './components/dropdown/dropdown';\n\n@NgModule({\n imports: [MsButton, MsDropdown], // standalone components can be imported\n exports: [MsButton, MsDropdown]\n})\nexport class MsDesignSystemModule {}\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\n\nexport function provideMsDesignSystem(): EnvironmentProviders {\n return makeEnvironmentProviders([]);\n}\n","// Components\nexport * from './components/button/ms-button.component';\nexport * from './components/dropdown/dropdown';\n\n// NgModule\nexport * from './ms-design-system.module';\n\n// Providers\nexport * from './providers/ms-design-system';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/styles.scss
CHANGED
|
@@ -32,7 +32,14 @@ $muted: #6A6B6D;
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
/* Rounded */
|
|
35
|
-
.rounded-
|
|
35
|
+
.ms-rounded-none {
|
|
36
|
+
border-radius: 0px !important;
|
|
37
|
+
-webkit-border-radius: 0px !important;
|
|
38
|
+
-moz-border-radius: 0px !important;
|
|
39
|
+
-ms-border-radius: 0px !important;
|
|
40
|
+
-o-border-radius: 0px !important;
|
|
41
|
+
}
|
|
42
|
+
.ms-rounded-sm {
|
|
36
43
|
border-radius: 6px !important;
|
|
37
44
|
-webkit-border-radius: 6px !important;
|
|
38
45
|
-moz-border-radius: 6px !important;
|
|
@@ -40,7 +47,7 @@ $muted: #6A6B6D;
|
|
|
40
47
|
-o-border-radius: 6px !important;
|
|
41
48
|
}
|
|
42
49
|
|
|
43
|
-
.rounded-md {
|
|
50
|
+
.ms-rounded-md {
|
|
44
51
|
border-radius: 8px !important;
|
|
45
52
|
-webkit-border-radius: 8px !important;
|
|
46
53
|
-moz-border-radius: 8px !important;
|
|
@@ -48,7 +55,7 @@ $muted: #6A6B6D;
|
|
|
48
55
|
-o-border-radius: 8px !important;
|
|
49
56
|
}
|
|
50
57
|
|
|
51
|
-
.rounded-lg {
|
|
58
|
+
.ms-rounded-lg {
|
|
52
59
|
border-radius: 12px !important;
|
|
53
60
|
-webkit-border-radius: 12px !important;
|
|
54
61
|
-moz-border-radius: 12px !important;
|
|
@@ -56,7 +63,7 @@ $muted: #6A6B6D;
|
|
|
56
63
|
-o-border-radius: 12px !important;
|
|
57
64
|
}
|
|
58
65
|
|
|
59
|
-
.rounded-circle {
|
|
66
|
+
.ms-rounded-circle {
|
|
60
67
|
border-radius: 50px !important;
|
|
61
68
|
-webkit-border-radius: 50px !important;
|
|
62
69
|
-moz-border-radius: 50px !important;
|
|
@@ -66,9 +73,7 @@ $muted: #6A6B6D;
|
|
|
66
73
|
|
|
67
74
|
// Base button styles
|
|
68
75
|
.ms-btn {
|
|
69
|
-
// padding: 5px 12px !important;
|
|
70
76
|
border: 1px solid transparent ;
|
|
71
|
-
border-radius: 8px ;
|
|
72
77
|
font-size: 14px !important;
|
|
73
78
|
font-weight: 400 !important;
|
|
74
79
|
line-height: 18px !important;
|
|
@@ -77,20 +82,38 @@ $muted: #6A6B6D;
|
|
|
77
82
|
display: inline-block !important;
|
|
78
83
|
cursor: pointer !important;
|
|
79
84
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
80
|
-
-webkit-border-radius: 8px ;
|
|
81
|
-
-moz-border-radius: 8px ;
|
|
82
|
-
-ms-border-radius: 8px ;
|
|
83
|
-
-o-border-radius: 8px ;
|
|
84
85
|
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
85
86
|
-moz-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
86
87
|
-ms-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
87
88
|
-o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
89
|
+
&:hover {
|
|
90
|
+
background-color: color.adjust($light, $lightness: -7.5%) !important;
|
|
91
|
+
border-color: color.adjust($defaultborder, $lightness: -10%) !important;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&:focus {
|
|
95
|
+
box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25) !important;
|
|
96
|
+
border-color: var(--primary) !important;
|
|
97
|
+
outline: none !important;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&:active {
|
|
101
|
+
background-color: color.adjust($light, $lightness: -10%) !important;
|
|
102
|
+
border-color: color.adjust($defaultborder, $lightness: -15%) !important;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&.disabled,
|
|
106
|
+
&:disabled {
|
|
107
|
+
opacity: 0.65 !important;
|
|
108
|
+
// background-color: color.adjust($light, $lightness: -7.5%) !important;
|
|
109
|
+
cursor: not-allowed !important;
|
|
110
|
+
}
|
|
88
111
|
}
|
|
89
112
|
|
|
90
113
|
.ms-btn-sm {
|
|
91
114
|
// padding: 4px 12px !important;
|
|
92
115
|
border: 1px solid transparent ;
|
|
93
|
-
border-radius: 6px ;
|
|
116
|
+
// border-radius: 6px ;
|
|
94
117
|
font-size: 13px !important;
|
|
95
118
|
font-weight: 400 !important;
|
|
96
119
|
line-height: 16px !important;
|
|
@@ -99,10 +122,10 @@ $muted: #6A6B6D;
|
|
|
99
122
|
display: inline-block !important;
|
|
100
123
|
cursor: pointer !important;
|
|
101
124
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
102
|
-
-webkit-border-radius: 6px ;
|
|
103
|
-
-moz-border-radius: 6px ;
|
|
104
|
-
-ms-border-radius: 6px ;
|
|
105
|
-
-o-border-radius: 6px ;
|
|
125
|
+
// -webkit-border-radius: 6px ;
|
|
126
|
+
// -moz-border-radius: 6px ;
|
|
127
|
+
// -ms-border-radius: 6px ;
|
|
128
|
+
// -o-border-radius: 6px ;
|
|
106
129
|
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
107
130
|
-moz-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
108
131
|
-ms-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
@@ -110,9 +133,9 @@ $muted: #6A6B6D;
|
|
|
110
133
|
}
|
|
111
134
|
|
|
112
135
|
.ms-btn-md {
|
|
113
|
-
//
|
|
136
|
+
//padding: 7px 12px !important;
|
|
114
137
|
border: 1px solid transparent ;
|
|
115
|
-
border-radius: 8px ;
|
|
138
|
+
// border-radius: 8px ;
|
|
116
139
|
font-size: 14px !important;
|
|
117
140
|
font-weight: 400 !important;
|
|
118
141
|
line-height: 18px !important;
|
|
@@ -121,10 +144,10 @@ $muted: #6A6B6D;
|
|
|
121
144
|
display: inline-block !important;
|
|
122
145
|
cursor: pointer !important;
|
|
123
146
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
147
|
+
//-webkit-border-radius: 8px ;
|
|
148
|
+
//-moz-border-radius: 8px ;
|
|
149
|
+
//-ms-border-radius: 8px ;
|
|
150
|
+
//-o-border-radius: 8px ;
|
|
128
151
|
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
129
152
|
-moz-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
130
153
|
-ms-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
@@ -134,7 +157,7 @@ $muted: #6A6B6D;
|
|
|
134
157
|
.ms-btn-lg {
|
|
135
158
|
// padding: 8px 16px !important;
|
|
136
159
|
border: 1px solid transparent ;
|
|
137
|
-
border-radius: 8px ;
|
|
160
|
+
// border-radius: 8px ;
|
|
138
161
|
font-size: 16px !important;
|
|
139
162
|
font-weight: 400 !important;
|
|
140
163
|
line-height: 20px !important;
|
|
@@ -143,10 +166,10 @@ $muted: #6A6B6D;
|
|
|
143
166
|
display: inline-block !important;
|
|
144
167
|
cursor: pointer !important;
|
|
145
168
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
146
|
-
-webkit-border-radius: 8px ;
|
|
147
|
-
-moz-border-radius: 8px ;
|
|
148
|
-
-ms-border-radius: 8px ;
|
|
149
|
-
-o-border-radius: 8px ;
|
|
169
|
+
// -webkit-border-radius: 8px ;
|
|
170
|
+
// -moz-border-radius: 8px ;
|
|
171
|
+
// -ms-border-radius: 8px ;
|
|
172
|
+
// -o-border-radius: 8px ;
|
|
150
173
|
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
151
174
|
-moz-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
152
175
|
-ms-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
|
|
@@ -160,6 +183,8 @@ padding-top: 5px !important;
|
|
|
160
183
|
padding-right: 12px !important;
|
|
161
184
|
padding-bottom: 5px !important;
|
|
162
185
|
padding-left: 12px !important;
|
|
186
|
+
display: flex !important;
|
|
187
|
+
align-items: center !important;
|
|
163
188
|
}
|
|
164
189
|
.ms-btn-sm{
|
|
165
190
|
height: 14px !important;
|
|
@@ -167,7 +192,9 @@ padding-top: 4px !important;
|
|
|
167
192
|
padding-right: 12px !important;
|
|
168
193
|
padding-bottom: 4px !important;
|
|
169
194
|
padding-left: 12px !important;
|
|
170
|
-
border: 1px solid #CCCCCC !important;
|
|
195
|
+
// border: 1px solid #CCCCCC !important;
|
|
196
|
+
display: flex !important;
|
|
197
|
+
align-items: center !important;
|
|
171
198
|
}
|
|
172
199
|
.ms-btn-md{
|
|
173
200
|
height: 16px !important;
|
|
@@ -175,6 +202,8 @@ padding-top: 7px !important;
|
|
|
175
202
|
padding-right: 12px !important;
|
|
176
203
|
padding-bottom: 7px !important;
|
|
177
204
|
padding-left: 12px !important;
|
|
205
|
+
display: flex !important;
|
|
206
|
+
align-items: center !important;
|
|
178
207
|
}
|
|
179
208
|
.ms-btn-lg{
|
|
180
209
|
height: 18px !important;
|
|
@@ -182,6 +211,8 @@ padding-top: 8px !important;
|
|
|
182
211
|
padding-right: 16px !important;
|
|
183
212
|
padding-bottom: 8px !important;
|
|
184
213
|
padding-left: 16px !important;
|
|
214
|
+
display: flex !important;
|
|
215
|
+
align-items: center !important;
|
|
185
216
|
}
|
|
186
217
|
|
|
187
218
|
.ms-btn-label{
|
|
@@ -263,6 +294,12 @@ padding-left: 16px !important;
|
|
|
263
294
|
background-color: color.adjust($primary, $lightness: -7.5%) !important;
|
|
264
295
|
border-color: color.adjust($primary, $lightness: -10%) !important;
|
|
265
296
|
}
|
|
297
|
+
&.disabled,
|
|
298
|
+
&:disabled {
|
|
299
|
+
opacity: 0.65 !important;
|
|
300
|
+
background-color: color.adjust($primary, $lightness: -7.5%) !important;
|
|
301
|
+
cursor: not-allowed !important;
|
|
302
|
+
}
|
|
266
303
|
}
|
|
267
304
|
|
|
268
305
|
.ms-btn-secondary {
|
|
@@ -274,6 +311,12 @@ padding-left: 16px !important;
|
|
|
274
311
|
background-color: color.adjust($secondary, $lightness: -7.5%) !important;
|
|
275
312
|
border-color: color.adjust($secondary, $lightness: -10%) !important;
|
|
276
313
|
}
|
|
314
|
+
&.disabled,
|
|
315
|
+
&:disabled {
|
|
316
|
+
opacity: 0.65 !important;
|
|
317
|
+
background-color: color.adjust($secondary, $lightness: -7.5%) !important;
|
|
318
|
+
cursor: not-allowed !important;
|
|
319
|
+
}
|
|
277
320
|
}
|
|
278
321
|
|
|
279
322
|
.ms-btn-success {
|
|
@@ -285,6 +328,12 @@ padding-left: 16px !important;
|
|
|
285
328
|
background-color: color.adjust($success, $lightness: -7.5%) !important;
|
|
286
329
|
border-color: color.adjust($success, $lightness: -10%) !important;
|
|
287
330
|
}
|
|
331
|
+
&.disabled,
|
|
332
|
+
&:disabled {
|
|
333
|
+
opacity: 0.65 !important;
|
|
334
|
+
background-color: color.adjust($success, $lightness: -7.5%) !important;
|
|
335
|
+
cursor: not-allowed !important;
|
|
336
|
+
}
|
|
288
337
|
}
|
|
289
338
|
|
|
290
339
|
.ms-btn-danger {
|
|
@@ -296,6 +345,12 @@ padding-left: 16px !important;
|
|
|
296
345
|
background-color: color.adjust($danger, $lightness: -7.5%) !important;
|
|
297
346
|
border-color: color.adjust($danger, $lightness: -10%) !important;
|
|
298
347
|
}
|
|
348
|
+
&.disabled,
|
|
349
|
+
&:disabled {
|
|
350
|
+
opacity: 0.65 !important;
|
|
351
|
+
background-color: color.adjust($danger, $lightness: -7.5%) !important;
|
|
352
|
+
cursor: not-allowed !important;
|
|
353
|
+
}
|
|
299
354
|
}
|
|
300
355
|
|
|
301
356
|
.ms-btn-warning {
|
|
@@ -307,6 +362,12 @@ padding-left: 16px !important;
|
|
|
307
362
|
background-color: color.adjust($warning, $lightness: -7.5%) !important;
|
|
308
363
|
border-color: color.adjust($warning, $lightness: -10%) !important;
|
|
309
364
|
}
|
|
365
|
+
&.disabled,
|
|
366
|
+
&:disabled {
|
|
367
|
+
opacity: 0.65 !important;
|
|
368
|
+
background-color: color.adjust($warning, $lightness: -7.5%) !important;
|
|
369
|
+
cursor: not-allowed !important;
|
|
370
|
+
}
|
|
310
371
|
}
|
|
311
372
|
|
|
312
373
|
.ms-btn-info {
|
|
@@ -318,6 +379,12 @@ padding-left: 16px !important;
|
|
|
318
379
|
background-color: color.adjust($info, $lightness: -7.5%) !important;
|
|
319
380
|
border-color: color.adjust($info, $lightness: -10%) !important;
|
|
320
381
|
}
|
|
382
|
+
&.disabled,
|
|
383
|
+
&:disabled {
|
|
384
|
+
opacity: 0.65 !important;
|
|
385
|
+
background-color: color.adjust($info, $lightness: -7.5%) !important;
|
|
386
|
+
cursor: not-allowed !important;
|
|
387
|
+
}
|
|
321
388
|
}
|
|
322
389
|
|
|
323
390
|
.ms-btn-light {
|
|
@@ -329,6 +396,12 @@ padding-left: 16px !important;
|
|
|
329
396
|
background-color: color.adjust($light, $lightness: -7.5%) !important;
|
|
330
397
|
border-color: color.adjust($light, $lightness: -10%) !important;
|
|
331
398
|
}
|
|
399
|
+
&.disabled,
|
|
400
|
+
&:disabled {
|
|
401
|
+
opacity: 0.65 !important;
|
|
402
|
+
background-color: color.adjust($light, $lightness: -7.5%) !important;
|
|
403
|
+
cursor: not-allowed !important;
|
|
404
|
+
}
|
|
332
405
|
}
|
|
333
406
|
|
|
334
407
|
.ms-btn-dark {
|
|
@@ -340,6 +413,12 @@ padding-left: 16px !important;
|
|
|
340
413
|
background-color: color.adjust($dark, $lightness: -7.5%) !important;
|
|
341
414
|
border-color: color.adjust($dark, $lightness: -10%) !important;
|
|
342
415
|
}
|
|
416
|
+
&.disabled,
|
|
417
|
+
&:disabled {
|
|
418
|
+
opacity: 0.65 !important;
|
|
419
|
+
background-color: color.adjust($dark, $lightness: -7.5%) !important;
|
|
420
|
+
cursor: not-allowed !important;
|
|
421
|
+
}
|
|
343
422
|
}
|
|
344
423
|
|
|
345
424
|
.ms-btn-link {
|
|
@@ -351,6 +430,11 @@ padding-left: 16px !important;
|
|
|
351
430
|
color: color.adjust($link, $lightness: -15%) !important;
|
|
352
431
|
text-decoration: underline !important;
|
|
353
432
|
}
|
|
433
|
+
&.disabled,
|
|
434
|
+
&:disabled {
|
|
435
|
+
opacity: 0.65 !important;
|
|
436
|
+
cursor: not-allowed !important;
|
|
437
|
+
}
|
|
354
438
|
}
|
|
355
439
|
|
|
356
440
|
.ms-btn-subtle {
|
|
@@ -363,6 +447,11 @@ padding-left: 16px !important;
|
|
|
363
447
|
;
|
|
364
448
|
// text-decoration: underline;
|
|
365
449
|
}
|
|
450
|
+
&.disabled,
|
|
451
|
+
&:disabled {
|
|
452
|
+
opacity: 0.65 !important;
|
|
453
|
+
cursor: not-allowed !important;
|
|
454
|
+
}
|
|
366
455
|
}
|
|
367
456
|
|
|
368
457
|
.ms-btn-skeleton {
|
|
@@ -454,9 +543,23 @@ span {
|
|
|
454
543
|
// border-top-right-radius: calc(0.75rem - 1px);
|
|
455
544
|
}
|
|
456
545
|
|
|
546
|
+
ms-button {
|
|
547
|
+
cursor: pointer; // default cursor
|
|
548
|
+
pointer-events: auto; // default
|
|
549
|
+
|
|
550
|
+
&.disabled {
|
|
551
|
+
cursor: not-allowed !important;
|
|
552
|
+
pointer-events: none; // disables clicks
|
|
553
|
+
opacity: 0.6; // optional: make it visually disabled
|
|
554
|
+
background: #ebebeb !important;
|
|
555
|
+
color: #8a8585 !important;
|
|
556
|
+
border: 1px solid var(--semantics-border-subtle-primary, #CCCCCC) !important;
|
|
557
|
+
}
|
|
558
|
+
}
|
|
559
|
+
|
|
457
560
|
.ms-card-body {
|
|
458
561
|
flex: 1 1 auto !important;
|
|
459
|
-
padding: 16px !important;
|
|
562
|
+
// padding: 16px !important;
|
|
460
563
|
}
|
|
461
564
|
|
|
462
565
|
.ms-card-title {
|
|
@@ -611,11 +714,11 @@ span {
|
|
|
611
714
|
}
|
|
612
715
|
|
|
613
716
|
.ms-border {
|
|
614
|
-
border: 1px solid #
|
|
717
|
+
border: 1px solid #CCCCCC !important;
|
|
615
718
|
}
|
|
616
719
|
|
|
617
720
|
.ms-border-left {
|
|
618
|
-
border-left: 1px solid #
|
|
721
|
+
border-left: 1px solid #CCCCCC !important;
|
|
619
722
|
}
|
|
620
723
|
|
|
621
724
|
.ms-border-bottom-success-2px {
|
|
@@ -1394,8 +1497,8 @@ ms-button .ms-btn-default {
|
|
|
1394
1497
|
overflow: overlay !important;
|
|
1395
1498
|
}
|
|
1396
1499
|
|
|
1397
|
-
ms-button {
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
}
|
|
1500
|
+
// ms-button {
|
|
1501
|
+
// a{
|
|
1502
|
+
// padding: 0px !important;
|
|
1503
|
+
// }
|
|
1504
|
+
// }
|
|
@@ -10,12 +10,15 @@ declare class MsButton implements OnChanges, OnInit {
|
|
|
10
10
|
radiussize: string;
|
|
11
11
|
block: boolean;
|
|
12
12
|
disabled: boolean;
|
|
13
|
+
isBorder: boolean;
|
|
13
14
|
textSrc: string;
|
|
14
15
|
icon: string | null;
|
|
15
16
|
iconPosition: IconPosition;
|
|
16
17
|
iconOnly: boolean;
|
|
17
18
|
class: string;
|
|
19
|
+
buttonType: string;
|
|
18
20
|
htmlChange: EventEmitter<string>;
|
|
21
|
+
click: EventEmitter<Event>;
|
|
19
22
|
projectedContent: any;
|
|
20
23
|
/** Dynamic class computation */
|
|
21
24
|
get classes(): string;
|
|
@@ -26,8 +29,9 @@ declare class MsButton implements OnChanges, OnInit {
|
|
|
26
29
|
ngOnChanges(changes: SimpleChanges): void;
|
|
27
30
|
ngOnInit(): void;
|
|
28
31
|
ngAfterContentInit(): void;
|
|
32
|
+
onClick(event: Event): void;
|
|
29
33
|
static ɵfac: i0.ɵɵFactoryDeclaration<MsButton, never>;
|
|
30
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MsButton, "ms-button", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "radiussize": { "alias": "radiussize"; "required": false; }; "block": { "alias": "block"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "textSrc": { "alias": "textSrc"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "htmlChange": "htmlChange"; }, ["projectedContent"], ["*"], true, never>;
|
|
34
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MsButton, "ms-button", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "radiussize": { "alias": "radiussize"; "required": false; }; "block": { "alias": "block"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isBorder": { "alias": "isBorder"; "required": false; }; "textSrc": { "alias": "textSrc"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "class": { "alias": "class"; "required": false; }; "buttonType": { "alias": "buttonType"; "required": false; }; }, { "htmlChange": "htmlChange"; "click": "click"; }, ["projectedContent"], ["*", "*", "*"], true, never>;
|
|
31
35
|
}
|
|
32
36
|
|
|
33
37
|
declare class MsDropdown {
|