ms-design-system 0.0.17 → 0.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { EventEmitter, ContentChild, Output, Input, Component, NgModule, makeEnvironmentProviders } from '@angular/core';
|
|
3
|
+
import { EventEmitter, ContentChild, Output, Input, Component, forwardRef, booleanAttribute, NgModule, makeEnvironmentProviders } from '@angular/core';
|
|
4
|
+
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
|
|
4
5
|
|
|
5
6
|
class MsButton {
|
|
6
7
|
el;
|
|
@@ -117,11 +118,11 @@ class MsButton {
|
|
|
117
118
|
}
|
|
118
119
|
}
|
|
119
120
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
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-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-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!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 }] });
|
|
121
|
+
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-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-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!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-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:18px;height:18px;border:2px solid #cbd5e1;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:14px;line-height:1}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
121
122
|
}
|
|
122
123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, decorators: [{
|
|
123
124
|
type: Component,
|
|
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-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-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!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"] }]
|
|
125
|
+
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-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-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!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-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:18px;height:18px;border:2px solid #cbd5e1;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:14px;line-height:1}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}\n"] }]
|
|
125
126
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
|
|
126
127
|
type: Input
|
|
127
128
|
}], variant: [{
|
|
@@ -166,16 +167,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
166
167
|
args: [{ selector: 'ms-dropdown', standalone: true, imports: [CommonModule], template: "<p>dropdown works!</p>\n" }]
|
|
167
168
|
}] });
|
|
168
169
|
|
|
170
|
+
class MsCheckbox {
|
|
171
|
+
label;
|
|
172
|
+
disabled = false;
|
|
173
|
+
skeleton = false;
|
|
174
|
+
required = false;
|
|
175
|
+
indeterminate = false;
|
|
176
|
+
invalidBox = false;
|
|
177
|
+
checked = false;
|
|
178
|
+
/* ---------- Internal state ---------- */
|
|
179
|
+
touched = false;
|
|
180
|
+
/* ---------- CVA ---------- */
|
|
181
|
+
onChange = (_) => { };
|
|
182
|
+
onTouched = () => { };
|
|
183
|
+
writeValue(value) {
|
|
184
|
+
this.checked = !!value;
|
|
185
|
+
}
|
|
186
|
+
registerOnChange(fn) {
|
|
187
|
+
this.onChange = fn;
|
|
188
|
+
}
|
|
189
|
+
registerOnTouched(fn) {
|
|
190
|
+
this.onTouched = fn;
|
|
191
|
+
}
|
|
192
|
+
setDisabledState(isDisabled) {
|
|
193
|
+
this.disabled = isDisabled;
|
|
194
|
+
}
|
|
195
|
+
/* ---------- Validation ---------- */
|
|
196
|
+
validate(control) {
|
|
197
|
+
if (this.required && !this.checked) {
|
|
198
|
+
return { required: true };
|
|
199
|
+
}
|
|
200
|
+
return null;
|
|
201
|
+
}
|
|
202
|
+
/* ---------- UI Logic ---------- */
|
|
203
|
+
toggle() {
|
|
204
|
+
if (this.disabled || this.skeleton)
|
|
205
|
+
return;
|
|
206
|
+
this.indeterminate = false; // ✅ FIX
|
|
207
|
+
this.checked = !this.checked;
|
|
208
|
+
this.onChange(this.checked);
|
|
209
|
+
this.markTouched();
|
|
210
|
+
}
|
|
211
|
+
markTouched() {
|
|
212
|
+
if (!this.touched) {
|
|
213
|
+
this.touched = true;
|
|
214
|
+
this.onTouched();
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
get invalid() {
|
|
218
|
+
if (this.invalidBox) {
|
|
219
|
+
return true;
|
|
220
|
+
}
|
|
221
|
+
return this.required && this.touched && !this.checked;
|
|
222
|
+
}
|
|
223
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
224
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsCheckbox, isStandalone: true, selector: "ms-checkbox", inputs: { label: "label", disabled: ["disabled", "disabled", booleanAttribute], skeleton: ["skeleton", "skeleton", booleanAttribute], required: ["required", "required", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], invalidBox: ["invalidBox", "invalidBox", booleanAttribute], checked: ["checked", "checked", booleanAttribute] }, providers: [
|
|
225
|
+
{
|
|
226
|
+
provide: NG_VALUE_ACCESSOR,
|
|
227
|
+
useExisting: forwardRef(() => MsCheckbox),
|
|
228
|
+
multi: true
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
provide: NG_VALIDATORS,
|
|
232
|
+
useExisting: forwardRef(() => MsCheckbox),
|
|
233
|
+
multi: true
|
|
234
|
+
}
|
|
235
|
+
], ngImport: i0, template: "<label\n class=\"ms-checkbox\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [class.skeleton]=\"skeleton\"\n>\n @if (skeleton) {\n <div class=\"ms-checkbox-skeleton\"></div>\n } @else {\n\n <input\n type=\"checkbox\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"toggle()\"\n (blur)=\"markTouched()\"\n />\n\n <span class=\"ms-checkbox-box\">\n @if (indeterminate) {\n <span class=\"ms-indeterminate\"></span>\n } @else if (checked) {\n <span class=\"ms-checkmark\">✓</span>\n }\n </span>\n\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n }\n</label>\n\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-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-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!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-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:18px;height:18px;border:2px solid #cbd5e1;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:14px;line-height:1}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}\n"] });
|
|
236
|
+
}
|
|
237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsCheckbox, decorators: [{
|
|
238
|
+
type: Component,
|
|
239
|
+
args: [{ selector: 'ms-checkbox', imports: [], providers: [
|
|
240
|
+
{
|
|
241
|
+
provide: NG_VALUE_ACCESSOR,
|
|
242
|
+
useExisting: forwardRef(() => MsCheckbox),
|
|
243
|
+
multi: true
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
provide: NG_VALIDATORS,
|
|
247
|
+
useExisting: forwardRef(() => MsCheckbox),
|
|
248
|
+
multi: true
|
|
249
|
+
}
|
|
250
|
+
], template: "<label\n class=\"ms-checkbox\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [class.skeleton]=\"skeleton\"\n>\n @if (skeleton) {\n <div class=\"ms-checkbox-skeleton\"></div>\n } @else {\n\n <input\n type=\"checkbox\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"toggle()\"\n (blur)=\"markTouched()\"\n />\n\n <span class=\"ms-checkbox-box\">\n @if (indeterminate) {\n <span class=\"ms-indeterminate\"></span>\n } @else if (checked) {\n <span class=\"ms-checkmark\">✓</span>\n }\n </span>\n\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n }\n</label>\n\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-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-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!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-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:18px;height:18px;border:2px solid #cbd5e1;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:14px;line-height:1}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}\n"] }]
|
|
251
|
+
}], propDecorators: { label: [{
|
|
252
|
+
type: Input
|
|
253
|
+
}], disabled: [{
|
|
254
|
+
type: Input,
|
|
255
|
+
args: [{ transform: booleanAttribute }]
|
|
256
|
+
}], skeleton: [{
|
|
257
|
+
type: Input,
|
|
258
|
+
args: [{ transform: booleanAttribute }]
|
|
259
|
+
}], required: [{
|
|
260
|
+
type: Input,
|
|
261
|
+
args: [{ transform: booleanAttribute }]
|
|
262
|
+
}], indeterminate: [{
|
|
263
|
+
type: Input,
|
|
264
|
+
args: [{ transform: booleanAttribute }]
|
|
265
|
+
}], invalidBox: [{
|
|
266
|
+
type: Input,
|
|
267
|
+
args: [{ transform: booleanAttribute }]
|
|
268
|
+
}], checked: [{
|
|
269
|
+
type: Input,
|
|
270
|
+
args: [{ transform: booleanAttribute }]
|
|
271
|
+
}] } });
|
|
272
|
+
|
|
169
273
|
class MsDesignSystemModule {
|
|
170
274
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
171
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, imports: [MsButton, MsDropdown], exports: [MsButton, MsDropdown] });
|
|
275
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, imports: [MsButton, MsDropdown, MsCheckbox], exports: [MsButton, MsDropdown, MsCheckbox] });
|
|
172
276
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, imports: [MsButton, MsDropdown] });
|
|
173
277
|
}
|
|
174
278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, decorators: [{
|
|
175
279
|
type: NgModule,
|
|
176
280
|
args: [{
|
|
177
|
-
imports: [MsButton, MsDropdown], // standalone components can be imported
|
|
178
|
-
exports: [MsButton, MsDropdown]
|
|
281
|
+
imports: [MsButton, MsDropdown, MsCheckbox], // standalone components can be imported
|
|
282
|
+
exports: [MsButton, MsDropdown, MsCheckbox]
|
|
179
283
|
}]
|
|
180
284
|
}] });
|
|
181
285
|
|
|
@@ -189,5 +293,5 @@ function provideMsDesignSystem() {
|
|
|
189
293
|
* Generated bundle index. Do not edit.
|
|
190
294
|
*/
|
|
191
295
|
|
|
192
|
-
export { MsButton, MsDesignSystemModule, MsDropdown, provideMsDesignSystem };
|
|
296
|
+
export { MsButton, MsCheckbox, MsDesignSystemModule, MsDropdown, provideMsDesignSystem };
|
|
193
297
|
//# sourceMappingURL=ms-design-system.mjs.map
|
|
@@ -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 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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"}
|
|
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/components/ms-checkbox/ms-checkbox.ts","../../../projects/ui-library/src/lib/components/ms-checkbox/ms-checkbox.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 { AfterViewInit, booleanAttribute, Component, ElementRef, EventEmitter, forwardRef, Input, Output, ViewChild } from '@angular/core';\nimport { AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';\n\n@Component({\n selector: 'ms-checkbox',\n imports: [],\n templateUrl: './ms-checkbox.html',\n styleUrl: './ms-checkbox.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MsCheckbox),\n multi: true\n },\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => MsCheckbox),\n multi: true\n }\n ]\n})\nexport class MsCheckbox implements ControlValueAccessor, Validator{\n\n @Input() label?: string;\n\n @Input({ transform: booleanAttribute }) disabled = false;\n @Input({ transform: booleanAttribute }) skeleton = false;\n @Input({ transform: booleanAttribute }) required = false;\n @Input({ transform: booleanAttribute }) indeterminate = false;\n @Input({ transform: booleanAttribute }) invalidBox = false;\n @Input({ transform: booleanAttribute }) checked = false;\n\n /* ---------- Internal state ---------- */\n touched = false;\n\n /* ---------- CVA ---------- */\n private onChange = (_: boolean) => {};\n private onTouched = () => {};\n\n writeValue(value: boolean): void {\n this.checked = !!value;\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n /* ---------- Validation ---------- */\n validate(control: AbstractControl): ValidationErrors | null {\n if (this.required && !this.checked) {\n return { required: true };\n }\n return null;\n }\n\n /* ---------- UI Logic ---------- */\n toggle(): void {\n if (this.disabled || this.skeleton) return;\n\n this.indeterminate = false; // ✅ FIX\n this.checked = !this.checked;\n\n this.onChange(this.checked);\n this.markTouched();\n }\n\n markTouched(): void {\n if (!this.touched) {\n this.touched = true;\n this.onTouched();\n }\n }\n\n get invalid(): boolean {\n if(this.invalidBox){\n return true\n }\n return this.required && this.touched && !this.checked;\n }\n\n\n}","<label\n class=\"ms-checkbox\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [class.skeleton]=\"skeleton\"\n>\n @if (skeleton) {\n <div class=\"ms-checkbox-skeleton\"></div>\n } @else {\n\n <input\n type=\"checkbox\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"toggle()\"\n (blur)=\"markTouched()\"\n />\n\n <span class=\"ms-checkbox-box\">\n @if (indeterminate) {\n <span class=\"ms-indeterminate\"></span>\n } @else if (checked) {\n <span class=\"ms-checkmark\">✓</span>\n }\n </span>\n\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n }\n</label>\n\n","import { NgModule } from '@angular/core';\nimport { MsButton } from './components/button/ms-button.component';\nimport { MsDropdown } from './components/dropdown/dropdown';\nimport { MsCheckbox } from './components/ms-checkbox/ms-checkbox';\n\n@NgModule({\n imports: [MsButton, MsDropdown,MsCheckbox], // standalone components can be imported\n exports: [MsButton, MsDropdown,MsCheckbox]\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';\nexport * from './components/ms-checkbox/ms-checkbox';\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
|
@@ -1088,6 +1088,10 @@ ms-button .ms-btn-default {
|
|
|
1088
1088
|
padding-top: .5rem !important;
|
|
1089
1089
|
}
|
|
1090
1090
|
|
|
1091
|
+
.ms-ps-5 {
|
|
1092
|
+
padding-left: 3rem !important;
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1091
1095
|
.ms-ps-4 {
|
|
1092
1096
|
padding-left: 1.5rem !important;
|
|
1093
1097
|
}
|
|
@@ -1100,6 +1104,14 @@ ms-button .ms-btn-default {
|
|
|
1100
1104
|
padding-left: .5rem !important;
|
|
1101
1105
|
}
|
|
1102
1106
|
|
|
1107
|
+
.ms-ps-1 {
|
|
1108
|
+
padding-left: .25rem !important;
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
.ms-pe-5 {
|
|
1112
|
+
padding-right: 3rem !important;
|
|
1113
|
+
}
|
|
1114
|
+
|
|
1103
1115
|
.ms-pe-4 {
|
|
1104
1116
|
padding-right: 1.5rem !important;
|
|
1105
1117
|
}
|
|
@@ -1112,6 +1124,10 @@ ms-button .ms-btn-default {
|
|
|
1112
1124
|
padding-right: .5rem !important;
|
|
1113
1125
|
}
|
|
1114
1126
|
|
|
1127
|
+
.ms-pe-1 {
|
|
1128
|
+
padding-right: .25rem !important;
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1115
1131
|
.ms-pb-3 {
|
|
1116
1132
|
padding-bottom: 1rem !important;
|
|
1117
1133
|
}
|
|
@@ -1506,8 +1522,75 @@ ms-button .ms-btn-default {
|
|
|
1506
1522
|
overflow: overlay !important;
|
|
1507
1523
|
}
|
|
1508
1524
|
|
|
1509
|
-
//
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1525
|
+
//CheckBox
|
|
1526
|
+
.ms-checkbox {
|
|
1527
|
+
display: inline-flex;
|
|
1528
|
+
align-items: center;
|
|
1529
|
+
gap: 8px;
|
|
1530
|
+
cursor: pointer;
|
|
1531
|
+
user-select: none;
|
|
1532
|
+
|
|
1533
|
+
input {
|
|
1534
|
+
position: absolute;
|
|
1535
|
+
opacity: 0;
|
|
1536
|
+
}
|
|
1537
|
+
|
|
1538
|
+
.ms-checkbox-box {
|
|
1539
|
+
width: 18px;
|
|
1540
|
+
height: 18px;
|
|
1541
|
+
border: 2px solid #cbd5e1;
|
|
1542
|
+
border-radius: 4px;
|
|
1543
|
+
display: grid;
|
|
1544
|
+
place-items: center;
|
|
1545
|
+
background: #fff;
|
|
1546
|
+
// transition: 0.2s;
|
|
1547
|
+
}
|
|
1548
|
+
|
|
1549
|
+
.ms-checkmark {
|
|
1550
|
+
color: #fff;
|
|
1551
|
+
font-size: 14px;
|
|
1552
|
+
line-height: 1;
|
|
1553
|
+
}
|
|
1554
|
+
|
|
1555
|
+
.ms-indeterminate {
|
|
1556
|
+
width: 10px;
|
|
1557
|
+
height: 2px;
|
|
1558
|
+
background: #fff;
|
|
1559
|
+
border-radius: 1px;
|
|
1560
|
+
}
|
|
1561
|
+
|
|
1562
|
+
input:checked + .ms-checkbox-box,
|
|
1563
|
+
.ms-checkbox-box:has(.ms-indeterminate) {
|
|
1564
|
+
background: #2563eb;
|
|
1565
|
+
border-color: #2563eb;
|
|
1566
|
+
}
|
|
1567
|
+
|
|
1568
|
+
&:hover:not(.disabled):not(.skeleton) .ms-checkbox-box {
|
|
1569
|
+
border-color: #2563eb;
|
|
1570
|
+
}
|
|
1571
|
+
input:focus + .ms-checkbox-box {
|
|
1572
|
+
outline: 2px solid #B7DCFF;
|
|
1573
|
+
outline-offset: 2px;
|
|
1574
|
+
}
|
|
1575
|
+
|
|
1576
|
+
&.invalid .ms-checkbox-box {
|
|
1577
|
+
border-color: #dc2626;
|
|
1578
|
+
}
|
|
1579
|
+
|
|
1580
|
+
&.disabled {
|
|
1581
|
+
opacity: 0.5;
|
|
1582
|
+
cursor: not-allowed;
|
|
1583
|
+
}
|
|
1584
|
+
|
|
1585
|
+
.ms-label {
|
|
1586
|
+
font-size: 14px !important;
|
|
1587
|
+
}
|
|
1588
|
+
|
|
1589
|
+
.ms-checkbox-skeleton {
|
|
1590
|
+
width: 18px;
|
|
1591
|
+
height: 18px;
|
|
1592
|
+
border-radius: 4px;
|
|
1593
|
+
background: #e5e7eb;
|
|
1594
|
+
}
|
|
1595
|
+
}
|
|
1596
|
+
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { OnChanges, OnInit, EventEmitter, ElementRef, SimpleChanges, EnvironmentProviders } from '@angular/core';
|
|
3
|
+
import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
|
|
3
4
|
|
|
4
5
|
type IconPosition = 'prefix' | 'suffix';
|
|
5
6
|
declare class MsButton implements OnChanges, OnInit {
|
|
@@ -39,12 +40,41 @@ declare class MsDropdown {
|
|
|
39
40
|
static ɵcmp: i0.ɵɵComponentDeclaration<MsDropdown, "ms-dropdown", never, {}, {}, never, never, true, never>;
|
|
40
41
|
}
|
|
41
42
|
|
|
43
|
+
declare class MsCheckbox implements ControlValueAccessor, Validator {
|
|
44
|
+
label?: string;
|
|
45
|
+
disabled: boolean;
|
|
46
|
+
skeleton: boolean;
|
|
47
|
+
required: boolean;
|
|
48
|
+
indeterminate: boolean;
|
|
49
|
+
invalidBox: boolean;
|
|
50
|
+
checked: boolean;
|
|
51
|
+
touched: boolean;
|
|
52
|
+
private onChange;
|
|
53
|
+
private onTouched;
|
|
54
|
+
writeValue(value: boolean): void;
|
|
55
|
+
registerOnChange(fn: any): void;
|
|
56
|
+
registerOnTouched(fn: any): void;
|
|
57
|
+
setDisabledState(isDisabled: boolean): void;
|
|
58
|
+
validate(control: AbstractControl): ValidationErrors | null;
|
|
59
|
+
toggle(): void;
|
|
60
|
+
markTouched(): void;
|
|
61
|
+
get invalid(): boolean;
|
|
62
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MsCheckbox, never>;
|
|
63
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MsCheckbox, "ms-checkbox", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "skeleton": { "alias": "skeleton"; "required": false; }; "required": { "alias": "required"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "invalidBox": { "alias": "invalidBox"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, {}, never, never, true, never>;
|
|
64
|
+
static ngAcceptInputType_disabled: unknown;
|
|
65
|
+
static ngAcceptInputType_skeleton: unknown;
|
|
66
|
+
static ngAcceptInputType_required: unknown;
|
|
67
|
+
static ngAcceptInputType_indeterminate: unknown;
|
|
68
|
+
static ngAcceptInputType_invalidBox: unknown;
|
|
69
|
+
static ngAcceptInputType_checked: unknown;
|
|
70
|
+
}
|
|
71
|
+
|
|
42
72
|
declare class MsDesignSystemModule {
|
|
43
73
|
static ɵfac: i0.ɵɵFactoryDeclaration<MsDesignSystemModule, never>;
|
|
44
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<MsDesignSystemModule, never, [typeof MsButton, typeof MsDropdown], [typeof MsButton, typeof MsDropdown]>;
|
|
74
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<MsDesignSystemModule, never, [typeof MsButton, typeof MsDropdown, typeof MsCheckbox], [typeof MsButton, typeof MsDropdown, typeof MsCheckbox]>;
|
|
45
75
|
static ɵinj: i0.ɵɵInjectorDeclaration<MsDesignSystemModule>;
|
|
46
76
|
}
|
|
47
77
|
|
|
48
78
|
declare function provideMsDesignSystem(): EnvironmentProviders;
|
|
49
79
|
|
|
50
|
-
export { MsButton, MsDesignSystemModule, MsDropdown, provideMsDesignSystem };
|
|
80
|
+
export { MsButton, MsCheckbox, MsDesignSystemModule, MsDropdown, provideMsDesignSystem };
|