ms-design-system 0.0.2 → 0.0.6

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.
Files changed (8) hide show
  1. package/README.md +112 -0
  2. package/fesm2022/ms-design-system.mjs +33 -7
  3. package/fesm2022/ms-design-system.mjs.map +1 -1
  4. package/fesm2022/ms-ui-library.mjs +148 -0
  5. package/fesm2022/ms-ui-library.mjs.map +1 -0
  6. package/package.json +15 -3
  7. package/types/ms-design-system.d.ts +16 -3
  8. package/types/ms-ui-library.d.ts +46 -0
package/README.md ADDED
@@ -0,0 +1,112 @@
1
+ # MS UI Library
2
+
3
+ A comprehensive Angular UI component library for the MS Design System.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @ms/ui-library
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ### Import the Module
14
+
15
+ ```typescript
16
+ import { MsDesignSystemModule } from '@ms/ui-library';
17
+
18
+ @NgModule({
19
+ imports: [MsDesignSystemModule],
20
+ // ...
21
+ })
22
+ export class AppModule { }
23
+ ```
24
+
25
+ ### Or use Standalone Components
26
+
27
+ ```typescript
28
+ import { MsButton, MsDropdown } from '@ms/ui-library';
29
+
30
+ @Component({
31
+ selector: 'app-example',
32
+ imports: [MsButton, MsDropdown],
33
+ template: `
34
+ <ms-button variant="primary" size="md">Click me</ms-button>
35
+ <ms-dropdown></ms-dropdown>
36
+ `
37
+ })
38
+ export class ExampleComponent { }
39
+ ```
40
+
41
+ ### Using Providers (Recommended for Angular 17+)
42
+
43
+ ```typescript
44
+ import { provideMsDesignSystem } from '@ms/ui-library';
45
+
46
+ export const appConfig: ApplicationConfig = {
47
+ providers: [
48
+ provideMsDesignSystem(),
49
+ // other providers...
50
+ ]
51
+ };
52
+ ```
53
+
54
+ ## Components
55
+
56
+ ### MsButton
57
+
58
+ A versatile button component with multiple variants and sizes.
59
+
60
+ **Properties:**
61
+ - `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link' | 'subtle' | 'default'
62
+ - `size`: 'sm' | 'md' | 'lg'
63
+ - `type`: 'button' | 'submit' | 'reset'
64
+ - `disabled`: boolean
65
+ - `block`: boolean
66
+ - `icon`: string (CSS class for icon)
67
+ - `iconPosition`: 'prefix' | 'suffix'
68
+ - `iconOnly`: boolean
69
+
70
+ **Example:**
71
+ ```html
72
+ <ms-button
73
+ variant="primary"
74
+ size="md"
75
+ icon="fa fa-plus"
76
+ iconPosition="prefix">
77
+ Add Item
78
+ </ms-button>
79
+ ```
80
+
81
+ ### MsDropdown
82
+
83
+ A dropdown component for creating interactive menus.
84
+
85
+ **Example:**
86
+ ```html
87
+ <ms-dropdown></ms-dropdown>
88
+ ```
89
+
90
+ ## Styling
91
+
92
+ The library includes comprehensive SCSS styles. Import the styles in your `angular.json`:
93
+
94
+ ```json
95
+ {
96
+ "styles": [
97
+ "node_modules/@ms/ui-library/styles.scss"
98
+ ]
99
+ }
100
+ ```
101
+
102
+ ## Development
103
+
104
+ This library is built with Angular 21 and follows modern Angular practices including:
105
+ - Standalone components
106
+ - Modern SCSS with `@use` syntax
107
+ - TypeScript strict mode
108
+ - Comprehensive type definitions
109
+
110
+ ## License
111
+
112
+ MIT
package/fesm2022/ms-design-system.mjs CHANGED
@@ -1,12 +1,11 @@
1
- import * as i1 from '@angular/common';
2
1
  import { CommonModule } from '@angular/common';
3
2
  import * as i0 from '@angular/core';
4
- import { EventEmitter, ContentChild, Output, Input, Component } from '@angular/core';
3
+ import { EventEmitter, ContentChild, Output, Input, Component, NgModule, makeEnvironmentProviders } from '@angular/core';
5
4
 
6
5
  class MsButton {
7
6
  el;
8
7
  type = 'button';
9
- variant = 'primary';
8
+ variant = '';
10
9
  size = 'md';
11
10
  radiussize = 'none';
12
11
  block = false;
@@ -74,17 +73,16 @@ class MsButton {
74
73
  }
75
74
  ngAfterContentInit() {
76
75
  const inner = this.el.nativeElement.innerText.trim();
77
- console.log(inner, 'innerText');
78
76
  if (inner && !this.textSrc) {
79
77
  this.textSrc = inner;
80
78
  }
81
79
  }
82
80
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
83
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsButton, isStandalone: true, selector: "ms-button", inputs: { type: "type", variant: "variant", size: "size", radiussize: "radiussize", block: "block", disabled: "disabled", textSrc: "textSrc", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", class: "class" }, outputs: { htmlChange: "htmlChange" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\r\n\r\n @if (icon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\r\n }\r\n\r\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\r\n @if (!iconOnly && !textSrc) {\r\n <span><ng-content></ng-content></span>\r\n }\r\n\r\n <!-- If textSrc is given -->\r\n @if (!iconOnly && textSrc) {\r\n <span>{{ textSrc }}</span>\r\n }\r\n\r\n @if (icon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\r\n }\r\n</a>\r\n\r\n", styles: [".ms-btn{font-weight:500;cursor:pointer;border:none;padding:8px 16px;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease-in-out}.ms-btn-xs{padding:2px 8px;font-size:.75rem;min-height:28px}.ms-btn-xs.icon-only{height:28px;padding:0;font-size:.75rem}.ms-btn-sm{padding:4px 10px;font-size:.875rem;min-height:32px}.ms-btn-sm.icon-only{width:32px;height:32px;padding:0;font-size:.875rem}.ms-btn-md{padding:8px 16px;font-size:1rem;min-height:40px}.ms-btn-md.icon-only{width:40px;height:40px;padding:0;font-size:1rem}.ms-btn-lg{padding:12px 24px;font-size:1.125rem;min-height:48px}.ms-btn-lg.icon-only{width:48px;height:48px;padding:0;font-size:1.125rem}.ms-btn-default{border:2px solid #CCCCCC;background:#fff;color:#1b1f22}.ms-btn-primary{background:#0084ff;color:#fff}.ms-btn-hover{background:#f5f5f5;color:#1b1f22}.ms-btn-success{background:#28a745;color:#fff}.ms-btn-danger{background:#da3e37;color:#fff}.ms-btn-warn{background:#f58600;color:#fff}.ms-btn-pressed{background:#ebebeb;color:#1b1f22}.ms-btn-focus{background:transparent;border:thin solid #0084FF;color:#1b1f22}.ms-btn-label{background:transparent;color:#1b1f22}.rounded-small{border-radius:4px}.rounded-medium{border-radius:8px}.rounded-large{border-radius:12px}.rounded-circle{border-radius:50px}.d-flex{display:inline}.ms-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px);background:#f5f5f5;color:#1b1f22}.ms-btn:disabled{opacity:.6;cursor:not-allowed}.ms-btn i{display:inline-flex;align-items:center;justify-content:center;font-size:1em}.ms-btn i.prefix{margin-right:.5rem}.ms-btn i.suffix{margin-left:.5rem}.ms-btn.icon-only{padding:8px;justify-content:center;text-align:center}.btn-icon{display:inline-flex;align-items:center;justify-content:center;font-size:1em}.section{border:1px solid #ccc;padding:16px;border-radius:8px}.button-group ms-button{margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
81
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsButton, isStandalone: true, selector: "ms-button", inputs: { type: "type", variant: "variant", size: "size", radiussize: "radiussize", block: "block", disabled: "disabled", textSrc: "textSrc", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", class: "class" }, outputs: { htmlChange: "htmlChange" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\r\n\r\n <!-- @if (icon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\r\n } -->\r\n\r\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\r\n @if (!iconOnly && !textSrc) {\r\n <span><ng-content></ng-content></span>\r\n }\r\n\r\n <!-- If textSrc is given -->\r\n @if (!iconOnly && textSrc) {\r\n <span>{{ textSrc }}</span>\r\n }\r\n\r\n <!-- @if (icon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\r\n } -->\r\n</a>", styles: [":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-btn{padding:5px 12px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:400;line-height:18px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-sm{padding:4px 12px;border:1px solid transparent;border-radius:6px;font-size:13px;font-weight:400;line-height:16px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-md{padding:7px 12px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:400;line-height:18px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-lg{padding:8px 16px;border:1px solid transparent;border-radius:8px;font-size:16px;font-weight:400;line-height:20px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-default{background-color:transparent;border-color:var(--defaultborder);color:#171717}.ms-btn-default:hover{background-color:#e2e6ea;border-color:#b3b3b3}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40;border-color:var(--primary);outline:none}.ms-btn-default:active{background-color:#dae0e5;border-color:#a6a6a6}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65;background-color:#e2e6ea;cursor:not-allowed}.ms-btn-primary{background-color:var(--primary);border-color:var(--primary);color:#fff}.ms-btn-primary:hover{background-color:#0070d9;border-color:#006acc}.ms-btn-secondary{background-color:var(--secondary);border-color:var(--secondary);color:#fff}.ms-btn-secondary:hover{background-color:#5a6268;border-color:#545b62}.ms-btn-success{background-color:var(--success);border-color:var(--success);color:#fff}.ms-btn-success:hover{background-color:#218838;border-color:#1e7e34}.ms-btn-danger{background-color:var(--danger);border-color:var(--danger);color:#fff}.ms-btn-danger:hover{background-color:#c62c25;border-color:#bb2923}.ms-btn-warning{background-color:var(--warning);border-color:var(--warning);color:#fff}.ms-btn-warning:hover{background-color:#cf7100;border-color:#c26a00}.ms-btn-info{background-color:var(--info);border-color:var(--info);color:#fff}.ms-btn-info:hover{background-color:#138496;border-color:#117a8b}.ms-btn-light{background-color:var(--light);border-color:var(--light);color:#212529}.ms-btn-light:hover{background-color:#e2e6ea;border-color:#dae0e5}.ms-btn-dark{background-color:var(--dark);border-color:var(--dark);color:#fff}.ms-btn-dark:hover{background-color:#23272b;border-color:#1d2124}.ms-btn-link{background-color:transparent;border-color:transparent;color:var(--link)}.ms-btn-link:hover{color:#0056b3;text-decoration:underline}.ms-btn-subtle{background-color:transparent;border-color:transparent;color:#000}.ms-btn-subtle:hover{color:#000}.ms-btn-skeleton{background:var(--skeleton);background-size:200% 100%;animation:shimmer 1.5s infinite;color:transparent;border-color:#ebebeb;cursor:default}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}h1{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-1%;margin:0%}h2{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-1%;margin:0%}h3{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-1%;margin:0%}p,div,span{font-size:16px;line-height:20px;font-weight:400;letter-spacing:0%}.ms-card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.75rem}.ms-card-header{padding:10px 16px;margin-bottom:0;border-bottom:1px solid rgba(0,0,0,.125);border-top-left-radius:calc(.75rem - 1px);border-top-right-radius:calc(.75rem - 1px)}.ms-card-toolbar{padding:10px 16px;margin-bottom:0;border-bottom:1px solid rgba(0,0,0,.125)}.ms-card-body{flex:1 1 auto;padding:16px}.ms-card-title{margin-top:.5rem;margin-bottom:.5rem;font-size:1.25rem;font-weight:500}.ms-card-text{margin-top:0;margin-bottom:1rem}.ms-text-primary{color:var(--primary)}.ms-text-secondary{color:var(--secondary)}.ms-text-success{color:var(--success)}.ms-text-danger{color:var(--danger)}.ms-text-warning{color:var(--warning)}.ms-text-info{color:var(--info)}.ms-text-light{color:var(--light)}.ms-text-dark{color:var(--dark)}.ms-text-link{color:var(--link)}.ms-text-muted{color:var(--muted)}.ms-f-w-100{font-weight:100}.ms-f-w-200{font-weight:200}.ms-f-w-300{font-weight:300}.ms-f-w-400{font-weight:400}.ms-f-w-500{font-weight:500}.ms-f-w-600{font-weight:600}.ms-f-w-700{font-weight:700}.ms-f-w-800{font-weight:800}.ms-f-w-900{font-weight:900}.ms-fs-8{font-size:8px}.ms-fs-10{font-size:10px}.ms-fs-12{font-size:12px}.ms-fs-14{font-size:14px}.ms-fs-16{font-size:16px}.ms-fs-18{font-size:18px}.ms-fs-20{font-size:20px}.ms-fs-22{font-size:22px}.ms-fs-24{font-size:24px}.ms-fs-26{font-size:26px}.ms-fs-28{font-size:28px}.ms-fs-30{font-size:30px}.ms-fs-32{font-size:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
84
82
  }
85
83
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, decorators: [{
86
84
  type: Component,
87
- args: [{ selector: 'ms-button', imports: [CommonModule,], template: "<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\r\n\r\n @if (icon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\r\n }\r\n\r\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\r\n @if (!iconOnly && !textSrc) {\r\n <span><ng-content></ng-content></span>\r\n }\r\n\r\n <!-- If textSrc is given -->\r\n @if (!iconOnly && textSrc) {\r\n <span>{{ textSrc }}</span>\r\n }\r\n\r\n @if (icon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\r\n }\r\n</a>\r\n\r\n", styles: [".ms-btn{font-weight:500;cursor:pointer;border:none;padding:8px 16px;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease-in-out}.ms-btn-xs{padding:2px 8px;font-size:.75rem;min-height:28px}.ms-btn-xs.icon-only{height:28px;padding:0;font-size:.75rem}.ms-btn-sm{padding:4px 10px;font-size:.875rem;min-height:32px}.ms-btn-sm.icon-only{width:32px;height:32px;padding:0;font-size:.875rem}.ms-btn-md{padding:8px 16px;font-size:1rem;min-height:40px}.ms-btn-md.icon-only{width:40px;height:40px;padding:0;font-size:1rem}.ms-btn-lg{padding:12px 24px;font-size:1.125rem;min-height:48px}.ms-btn-lg.icon-only{width:48px;height:48px;padding:0;font-size:1.125rem}.ms-btn-default{border:2px solid #CCCCCC;background:#fff;color:#1b1f22}.ms-btn-primary{background:#0084ff;color:#fff}.ms-btn-hover{background:#f5f5f5;color:#1b1f22}.ms-btn-success{background:#28a745;color:#fff}.ms-btn-danger{background:#da3e37;color:#fff}.ms-btn-warn{background:#f58600;color:#fff}.ms-btn-pressed{background:#ebebeb;color:#1b1f22}.ms-btn-focus{background:transparent;border:thin solid #0084FF;color:#1b1f22}.ms-btn-label{background:transparent;color:#1b1f22}.rounded-small{border-radius:4px}.rounded-medium{border-radius:8px}.rounded-large{border-radius:12px}.rounded-circle{border-radius:50px}.d-flex{display:inline}.ms-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px);background:#f5f5f5;color:#1b1f22}.ms-btn:disabled{opacity:.6;cursor:not-allowed}.ms-btn i{display:inline-flex;align-items:center;justify-content:center;font-size:1em}.ms-btn i.prefix{margin-right:.5rem}.ms-btn i.suffix{margin-left:.5rem}.ms-btn.icon-only{padding:8px;justify-content:center;text-align:center}.btn-icon{display:inline-flex;align-items:center;justify-content:center;font-size:1em}.section{border:1px solid #ccc;padding:16px;border-radius:8px}.button-group ms-button{margin-bottom:8px}\n"] }]
85
+ args: [{ selector: 'ms-button', standalone: true, imports: [CommonModule], template: "<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\r\n\r\n <!-- @if (icon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\r\n } -->\r\n\r\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\r\n @if (!iconOnly && !textSrc) {\r\n <span><ng-content></ng-content></span>\r\n }\r\n\r\n <!-- If textSrc is given -->\r\n @if (!iconOnly && textSrc) {\r\n <span>{{ textSrc }}</span>\r\n }\r\n\r\n <!-- @if (icon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\r\n } -->\r\n</a>", styles: [":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-btn{padding:5px 12px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:400;line-height:18px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-sm{padding:4px 12px;border:1px solid transparent;border-radius:6px;font-size:13px;font-weight:400;line-height:16px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-md{padding:7px 12px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:400;line-height:18px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-lg{padding:8px 16px;border:1px solid transparent;border-radius:8px;font-size:16px;font-weight:400;line-height:20px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-default{background-color:transparent;border-color:var(--defaultborder);color:#171717}.ms-btn-default:hover{background-color:#e2e6ea;border-color:#b3b3b3}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40;border-color:var(--primary);outline:none}.ms-btn-default:active{background-color:#dae0e5;border-color:#a6a6a6}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65;background-color:#e2e6ea;cursor:not-allowed}.ms-btn-primary{background-color:var(--primary);border-color:var(--primary);color:#fff}.ms-btn-primary:hover{background-color:#0070d9;border-color:#006acc}.ms-btn-secondary{background-color:var(--secondary);border-color:var(--secondary);color:#fff}.ms-btn-secondary:hover{background-color:#5a6268;border-color:#545b62}.ms-btn-success{background-color:var(--success);border-color:var(--success);color:#fff}.ms-btn-success:hover{background-color:#218838;border-color:#1e7e34}.ms-btn-danger{background-color:var(--danger);border-color:var(--danger);color:#fff}.ms-btn-danger:hover{background-color:#c62c25;border-color:#bb2923}.ms-btn-warning{background-color:var(--warning);border-color:var(--warning);color:#fff}.ms-btn-warning:hover{background-color:#cf7100;border-color:#c26a00}.ms-btn-info{background-color:var(--info);border-color:var(--info);color:#fff}.ms-btn-info:hover{background-color:#138496;border-color:#117a8b}.ms-btn-light{background-color:var(--light);border-color:var(--light);color:#212529}.ms-btn-light:hover{background-color:#e2e6ea;border-color:#dae0e5}.ms-btn-dark{background-color:var(--dark);border-color:var(--dark);color:#fff}.ms-btn-dark:hover{background-color:#23272b;border-color:#1d2124}.ms-btn-link{background-color:transparent;border-color:transparent;color:var(--link)}.ms-btn-link:hover{color:#0056b3;text-decoration:underline}.ms-btn-subtle{background-color:transparent;border-color:transparent;color:#000}.ms-btn-subtle:hover{color:#000}.ms-btn-skeleton{background:var(--skeleton);background-size:200% 100%;animation:shimmer 1.5s infinite;color:transparent;border-color:#ebebeb;cursor:default}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}h1{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-1%;margin:0%}h2{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-1%;margin:0%}h3{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-1%;margin:0%}p,div,span{font-size:16px;line-height:20px;font-weight:400;letter-spacing:0%}.ms-card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.75rem}.ms-card-header{padding:10px 16px;margin-bottom:0;border-bottom:1px solid rgba(0,0,0,.125);border-top-left-radius:calc(.75rem - 1px);border-top-right-radius:calc(.75rem - 1px)}.ms-card-toolbar{padding:10px 16px;margin-bottom:0;border-bottom:1px solid rgba(0,0,0,.125)}.ms-card-body{flex:1 1 auto;padding:16px}.ms-card-title{margin-top:.5rem;margin-bottom:.5rem;font-size:1.25rem;font-weight:500}.ms-card-text{margin-top:0;margin-bottom:1rem}.ms-text-primary{color:var(--primary)}.ms-text-secondary{color:var(--secondary)}.ms-text-success{color:var(--success)}.ms-text-danger{color:var(--danger)}.ms-text-warning{color:var(--warning)}.ms-text-info{color:var(--info)}.ms-text-light{color:var(--light)}.ms-text-dark{color:var(--dark)}.ms-text-link{color:var(--link)}.ms-text-muted{color:var(--muted)}.ms-f-w-100{font-weight:100}.ms-f-w-200{font-weight:200}.ms-f-w-300{font-weight:300}.ms-f-w-400{font-weight:400}.ms-f-w-500{font-weight:500}.ms-f-w-600{font-weight:600}.ms-f-w-700{font-weight:700}.ms-f-w-800{font-weight:800}.ms-f-w-900{font-weight:900}.ms-fs-8{font-size:8px}.ms-fs-10{font-size:10px}.ms-fs-12{font-size:12px}.ms-fs-14{font-size:14px}.ms-fs-16{font-size:16px}.ms-fs-18{font-size:18px}.ms-fs-20{font-size:20px}.ms-fs-22{font-size:22px}.ms-fs-24{font-size:24px}.ms-fs-26{font-size:26px}.ms-fs-28{font-size:28px}.ms-fs-30{font-size:30px}.ms-fs-32{font-size:32px}\n"] }]
88
86
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
89
87
  type: Input
90
88
  }], variant: [{
@@ -114,9 +112,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
114
112
  args: ['projectedContent', { static: false }]
115
113
  }] } });
116
114
 
115
+ class MsDropdown {
116
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
117
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDropdown, isStandalone: true, selector: "ms-dropdown", ngImport: i0, template: "<p>dropdown works!</p>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
118
+ }
119
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, decorators: [{
120
+ type: Component,
121
+ args: [{ selector: 'ms-dropdown', standalone: true, imports: [CommonModule], template: "<p>dropdown works!</p>\r\n" }]
122
+ }] });
123
+
124
+ class MsDesignSystemModule {
125
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
126
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, imports: [MsButton, MsDropdown], exports: [MsButton, MsDropdown] });
127
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, imports: [MsButton, MsDropdown] });
128
+ }
129
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, decorators: [{
130
+ type: NgModule,
131
+ args: [{
132
+ imports: [MsButton, MsDropdown], // standalone components can be imported
133
+ exports: [MsButton, MsDropdown]
134
+ }]
135
+ }] });
136
+
137
+ function provideMsDesignSystem() {
138
+ return makeEnvironmentProviders([]);
139
+ }
140
+
141
+ // Components
142
+
117
143
  /**
118
144
  * Generated bundle index. Do not edit.
119
145
  */
120
146
 
121
- export { MsButton };
147
+ export { MsButton, MsDesignSystemModule, MsDropdown, provideMsDesignSystem };
122
148
  //# sourceMappingURL=ms-design-system.mjs.map
package/fesm2022/ms-design-system.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ms-design-system.mjs","sources":["../../../projects/ui-library/src/components/button/ms-button.component.ts","../../../projects/ui-library/src/components/button/ms-button.component.html","../../../projects/ui-library/src/ms-design-system.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';\r\n\r\n\r\ntype IconPosition = 'prefix' | 'suffix';\r\n\r\n@Component({\r\n selector: 'ms-button',\r\n imports: [CommonModule,],\r\n templateUrl: './ms-button.component.html',\r\n styleUrls: ['./ms-button.component.scss'],\r\n})\r\nexport class MsButton implements OnChanges {\r\n @Input() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Input() variant: string = 'primary';\r\n @Input() size: string = 'md';\r\n @Input() radiussize: string = 'none';\r\n @Input() block: boolean = false;\r\n @Input() disabled: boolean = false;\r\n @Input() textSrc: string = '';\r\n\r\n // Icon support\r\n @Input() icon: string | null = null; // e.g. 'fa fa-plus' or 'bi bi-search'\r\n @Input() iconPosition: IconPosition = 'prefix'; // 'prefix' or 'suffix'\r\n @Input() iconOnly: boolean = false; // icon-only mode (no text)\r\n\r\n @Input() class: string = '';\r\n @Output() htmlChange = new EventEmitter<string>();\r\n @ContentChild('projectedContent', { static: false }) projectedContent: any;\r\n /** Dynamic class computation */\r\n get classes(): string {\r\n const radiusClass = this.radiussize !== 'none' ? `rounded-${this.radiussize}` : '';\r\n\r\n return [\r\n `ms-btn`,\r\n `d-flex`,\r\n `ms-btn-${this.variant}`,\r\n `ms-btn-${this.size}`,\r\n radiusClass,\r\n this.block ? 'block' : '',\r\n this.iconOnly ? 'icon-only' : ''\r\n ]\r\n .filter(Boolean)\r\n .join(' ')\r\n .trim();\r\n }\r\n\r\n get userClass() {\r\n return this.class;\r\n }\r\n\r\n /** Generate HTML string */\r\n getHtmlString(): string {\r\n const disabledAttr = this.disabled ? ' disabled' : '';\r\n const iconHtml = this.icon\r\n ? `<i class=\"${this.icon}\"></i>`\r\n : '';\r\n\r\n let innerHtml = '';\r\n\r\nif (this.iconOnly) {\r\n // Icon-only → just icon, centered\r\n innerHtml = `<i class=\"${this.icon} btn-icon\"></i>`;\r\n} \r\nelse if (this.icon && this.iconPosition === 'prefix') {\r\n // Prefix → icon before text\r\n innerHtml = `<i class=\"${this.icon} btn-icon prefix\"></i> ${this.textSrc}`;\r\n} \r\nelse if (this.icon && this.iconPosition === 'suffix') {\r\n // Suffix → icon after text\r\n innerHtml = `${this.textSrc} <i class=\"${this.icon} btn-icon suffix\"></i>`;\r\n} \r\nelse {\r\n // Text only\r\n innerHtml = this.textSrc;\r\n}\r\n\r\n\r\n return `<ms-button type=\"${this.type}\" class=\"${this.classes}\"${disabledAttr}>${innerHtml}</ms-button>`;\r\n }\r\n\r\n \r\n constructor(private el: ElementRef) {}\r\n\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n this.htmlChange.emit(this.getHtmlString());\r\n }\r\n\r\n ngOnInit(): void {\r\n this.htmlChange.emit(this.getHtmlString());\r\n }\r\n\r\n ngAfterContentInit() {\r\n const inner = this.el.nativeElement.innerText.trim();\r\n console.log(inner,'innerText');\r\n\r\n if (inner && !this.textSrc) {\r\n this.textSrc = inner;\r\n }\r\n }\r\n \r\n}\r\n\r\n","<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\r\n\r\n @if (icon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\r\n }\r\n\r\n <!-- 👇 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\r\n @if (!iconOnly && !textSrc) {\r\n <span><ng-content></ng-content></span>\r\n }\r\n\r\n <!-- If textSrc is given -->\r\n @if (!iconOnly && textSrc) {\r\n <span>{{ textSrc }}</span>\r\n }\r\n\r\n @if (icon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\r\n }\r\n</a>\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ms-design-system.mjs","sources":["../../../projects/ui-library/src/lib/components/button/ms-button.component.ts","../../../projects/ui-library/src/lib/components/button/ms-button.component.html","../../../projects/ui-library/src/lib/components/dropdown/dropdown.ts","../../../projects/ui-library/src/lib/components/dropdown/dropdown.html","../../../projects/ui-library/src/lib/ms-design-system.module.ts","../../../projects/ui-library/src/lib/providers/ms-design-system.ts","../../../projects/ui-library/src/lib/index.ts","../../../projects/ui-library/src/ms-design-system.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\r\n\r\n\r\ntype IconPosition = 'prefix' | 'suffix';\r\n\r\n@Component({\r\n selector: 'ms-button',\r\n standalone: true,\r\n imports: [CommonModule],\r\n templateUrl: './ms-button.component.html',\r\n styleUrls: ['./ms-button.component.scss']\r\n})\r\nexport class MsButton implements OnChanges, OnInit {\r\n @Input() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Input() variant: string = '';\r\n @Input() size: string = 'md';\r\n @Input() radiussize: string = 'none';\r\n @Input() block: boolean = false;\r\n @Input() disabled: boolean = false;\r\n @Input() textSrc: string = '';\r\n\r\n // Icon support\r\n @Input() icon: string | null = null; // e.g. 'fa fa-plus' or 'bi bi-search'\r\n @Input() iconPosition: IconPosition = 'prefix'; // 'prefix' or 'suffix'\r\n @Input() iconOnly: boolean = false; // icon-only mode (no text)\r\n\r\n @Input() class: string = '';\r\n @Output() htmlChange = new EventEmitter<string>();\r\n @ContentChild('projectedContent', { static: false }) projectedContent: any;\r\n /** Dynamic class computation */\r\n get classes(): string {\r\n const radiusClass = this.radiussize !== 'none' ? `rounded-${this.radiussize}` : '';\r\n\r\n return [\r\n `ms-btn`,\r\n `d-flex`,\r\n `ms-btn-${this.variant}`,\r\n `ms-btn-${this.size}`,\r\n radiusClass,\r\n this.block ? 'block' : '',\r\n this.iconOnly ? 'icon-only' : ''\r\n ]\r\n .filter(Boolean)\r\n .join(' ')\r\n .trim();\r\n }\r\n\r\n get userClass() {\r\n return this.class;\r\n }\r\n\r\n /** Generate HTML string */\r\n getHtmlString(): string {\r\n const disabledAttr = this.disabled ? ' disabled' : '';\r\n const iconHtml = this.icon\r\n ? `<i class=\"${this.icon}\"></i>`\r\n : '';\r\n\r\n let innerHtml = '';\r\n\r\n if (this.iconOnly) {\r\n // Icon-only → just icon, centered\r\n innerHtml = `<i class=\"${this.icon} btn-icon\"></i>`;\r\n }\r\n else if (this.icon && this.iconPosition === 'prefix') {\r\n // Prefix → icon before text\r\n innerHtml = `<i class=\"${this.icon} btn-icon prefix\"></i> ${this.textSrc}`;\r\n }\r\n else if (this.icon && this.iconPosition === 'suffix') {\r\n // Suffix → icon after text\r\n innerHtml = `${this.textSrc} <i class=\"${this.icon} btn-icon suffix\"></i>`;\r\n }\r\n else {\r\n // Text only\r\n innerHtml = this.textSrc;\r\n }\r\n\r\n\r\n return `<ms-button type=\"${this.type}\" class=\"${this.classes}\"${disabledAttr}>${innerHtml}</ms-button>`;\r\n }\r\n\r\n\r\n constructor(private el: ElementRef) { }\r\n\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n this.htmlChange.emit(this.getHtmlString());\r\n }\r\n\r\n ngOnInit(): void {\r\n this.htmlChange.emit(this.getHtmlString());\r\n }\r\n\r\n ngAfterContentInit() {\r\n const inner = this.el.nativeElement.innerText.trim();\r\n if (inner && !this.textSrc) {\r\n this.textSrc = inner;\r\n }\r\n }\r\n\r\n}\r\n\r\n","<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\r\n\r\n <!-- @if (icon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\r\n } -->\r\n\r\n <!-- 👇 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\r\n @if (!iconOnly && !textSrc) {\r\n <span><ng-content></ng-content></span>\r\n }\r\n\r\n <!-- If textSrc is given -->\r\n @if (!iconOnly && textSrc) {\r\n <span>{{ textSrc }}</span>\r\n }\r\n\r\n <!-- @if (icon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\r\n } -->\r\n</a>","import { CommonModule } from '@angular/common';\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'ms-dropdown',\r\n standalone: true,\r\n imports: [CommonModule],\r\n templateUrl: './dropdown.html',\r\n styleUrls: ['./dropdown.scss']\r\n})\r\nexport class MsDropdown {\r\n\r\n}\r\n","<p>dropdown works!</p>\r\n","import { NgModule } from '@angular/core';\r\nimport { MsButton } from './components/button/ms-button.component';\r\nimport { MsDropdown } from './components/dropdown/dropdown';\r\n\r\n@NgModule({\r\n imports: [MsButton, MsDropdown], // standalone components can be imported\r\n exports: [MsButton, MsDropdown]\r\n})\r\nexport class MsDesignSystemModule {}\r\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\r\n\r\nexport function provideMsDesignSystem(): EnvironmentProviders {\r\n return makeEnvironmentProviders([]);\r\n}\r\n","// Components\r\nexport * from './components/button/ms-button.component';\r\nexport * from './components/dropdown/dropdown';\r\n\r\n// NgModule\r\nexport * from './ms-design-system.module';\r\n\r\n// Providers\r\nexport * from './providers/ms-design-system';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAaa,QAAQ,CAAA;AAsEC,IAAA,EAAA;IArEX,IAAI,GAAkC,QAAQ;IAC9C,OAAO,GAAW,EAAE;IACpB,IAAI,GAAW,IAAI;IACnB,UAAU,GAAW,MAAM;IAC3B,KAAK,GAAY,KAAK;IACtB,QAAQ,GAAY,KAAK;IACzB,OAAO,GAAW,EAAE;;AAGpB,IAAA,IAAI,GAAkB,IAAI,CAAC;AAC3B,IAAA,YAAY,GAAiB,QAAQ,CAAC;AACtC,IAAA,QAAQ,GAAY,KAAK,CAAC;IAE1B,KAAK,GAAW,EAAE;AACjB,IAAA,UAAU,GAAG,IAAI,YAAY,EAAU;AACI,IAAA,gBAAgB;;AAErE,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,KAAK,MAAM,GAAG,CAAA,QAAA,EAAW,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,EAAE;QAElF,OAAO;YACL,CAAA,MAAA,CAAQ;YACR,CAAA,MAAA,CAAQ;YACR,CAAA,OAAA,EAAU,IAAI,CAAC,OAAO,CAAA,CAAE;YACxB,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,CAAE;YACrB,WAAW;YACX,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG;AAC/B;aACE,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG;AACR,aAAA,IAAI,EAAE;IACX;AAEA,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,KAAK;IACnB;;IAGA,aAAa,GAAA;AACX,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE;AACrD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC;AACpB,cAAE,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,CAAA,MAAA;cACtB,EAAE;QAEN,IAAI,SAAS,GAAG,EAAE;AAElB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;;AAEjB,YAAA,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,iBAAiB;QACrD;aACK,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE;;YAEpD,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,0BAA0B,IAAI,CAAC,OAAO,CAAA,CAAE;QAC5E;aACK,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE;;YAEpD,SAAS,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,IAAI,CAAA,sBAAA,CAAwB;QAC5E;aACK;;AAEH,YAAA,SAAS,GAAG,IAAI,CAAC,OAAO;QAC1B;AAGA,QAAA,OAAO,CAAA,iBAAA,EAAoB,IAAI,CAAC,IAAI,CAAA,SAAA,EAAY,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,YAAY,CAAA,CAAA,EAAI,SAAS,cAAc;IACzG;AAGA,IAAA,WAAA,CAAoB,EAAc,EAAA;QAAd,IAAA,CAAA,EAAE,GAAF,EAAE;IAAgB;AAGtC,IAAA,WAAW,CAAC,OAAsB,EAAA;QAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5C;IAEA,QAAQ,GAAA;QACN,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5C;IAEA,kBAAkB,GAAA;AAChB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,IAAI,EAAE;AACpD,QAAA,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AAC1B,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;QACtB;IACF;uGAtFW,QAAQ,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,YAAA,EAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECbrB,qrBAmBI,EAAA,MAAA,EAAA,CAAA,k0KAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDVQ,YAAY,EAAA,CAAA,EAAA,CAAA;;2FAIX,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAPpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,qrBAAA,EAAA,MAAA,EAAA,CAAA,k0KAAA,CAAA,EAAA;;sBAKtB;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBAGA;;sBACA;;sBACA;;sBAEA;;sBACA;;sBACA,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,kBAAkB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;;MEnBxC,UAAU,CAAA;uGAAV,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVvB,4BACA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDKY,YAAY,EAAA,CAAA,EAAA,CAAA;;2FAIX,UAAU,EAAA,UAAA,EAAA,CAAA;kBAPtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,4BAAA,EAAA;;;MEEZ,oBAAoB,CAAA;uGAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,YAHrB,QAAQ,EAAE,UAAU,CAAA,EAAA,OAAA,EAAA,CACpB,QAAQ,EAAE,UAAU,CAAA,EAAA,CAAA;wGAEnB,oBAAoB,EAAA,OAAA,EAAA,CAHrB,QAAQ,EAAE,UAAU,CAAA,EAAA,CAAA;;2FAGnB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAJhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC;AAC/B,oBAAA,OAAO,EAAE,CAAC,QAAQ,EAAE,UAAU;AAC/B,iBAAA;;;SCLe,qBAAqB,GAAA;AACnC,IAAA,OAAO,wBAAwB,CAAC,EAAE,CAAC;AACrC;;ACJA;;ACAA;;AAEG;;;;"}
package/fesm2022/ms-ui-library.mjs ADDED
@@ -0,0 +1,148 @@
1
+ import { CommonModule } from '@angular/common';
2
+ import * as i0 from '@angular/core';
3
+ import { EventEmitter, ContentChild, Output, Input, Component, NgModule, makeEnvironmentProviders } from '@angular/core';
4
+
5
+ class MsButton {
6
+ el;
7
+ type = 'button';
8
+ variant = '';
9
+ size = 'md';
10
+ radiussize = 'none';
11
+ block = false;
12
+ disabled = false;
13
+ textSrc = '';
14
+ // Icon support
15
+ icon = null; // e.g. 'fa fa-plus' or 'bi bi-search'
16
+ iconPosition = 'prefix'; // 'prefix' or 'suffix'
17
+ iconOnly = false; // icon-only mode (no text)
18
+ class = '';
19
+ htmlChange = new EventEmitter();
20
+ projectedContent;
21
+ /** Dynamic class computation */
22
+ get classes() {
23
+ const radiusClass = this.radiussize !== 'none' ? `rounded-${this.radiussize}` : '';
24
+ return [
25
+ `ms-btn`,
26
+ `d-flex`,
27
+ `ms-btn-${this.variant}`,
28
+ `ms-btn-${this.size}`,
29
+ radiusClass,
30
+ this.block ? 'block' : '',
31
+ this.iconOnly ? 'icon-only' : ''
32
+ ]
33
+ .filter(Boolean)
34
+ .join(' ')
35
+ .trim();
36
+ }
37
+ get userClass() {
38
+ return this.class;
39
+ }
40
+ /** Generate HTML string */
41
+ getHtmlString() {
42
+ const disabledAttr = this.disabled ? ' disabled' : '';
43
+ const iconHtml = this.icon
44
+ ? `<i class="${this.icon}"></i>`
45
+ : '';
46
+ let innerHtml = '';
47
+ if (this.iconOnly) {
48
+ // Icon-only → just icon, centered
49
+ innerHtml = `<i class="${this.icon} btn-icon"></i>`;
50
+ }
51
+ else if (this.icon && this.iconPosition === 'prefix') {
52
+ // Prefix → icon before text
53
+ innerHtml = `<i class="${this.icon} btn-icon prefix"></i> ${this.textSrc}`;
54
+ }
55
+ else if (this.icon && this.iconPosition === 'suffix') {
56
+ // Suffix → icon after text
57
+ innerHtml = `${this.textSrc} <i class="${this.icon} btn-icon suffix"></i>`;
58
+ }
59
+ else {
60
+ // Text only
61
+ innerHtml = this.textSrc;
62
+ }
63
+ return `<ms-button type="${this.type}" class="${this.classes}"${disabledAttr}>${innerHtml}</ms-button>`;
64
+ }
65
+ constructor(el) {
66
+ this.el = el;
67
+ }
68
+ ngOnChanges(changes) {
69
+ this.htmlChange.emit(this.getHtmlString());
70
+ }
71
+ ngOnInit() {
72
+ this.htmlChange.emit(this.getHtmlString());
73
+ }
74
+ ngAfterContentInit() {
75
+ const inner = this.el.nativeElement.innerText.trim();
76
+ if (inner && !this.textSrc) {
77
+ this.textSrc = inner;
78
+ }
79
+ }
80
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
81
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsButton, isStandalone: true, selector: "ms-button", inputs: { type: "type", variant: "variant", size: "size", radiussize: "radiussize", block: "block", disabled: "disabled", textSrc: "textSrc", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", class: "class" }, outputs: { htmlChange: "htmlChange" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\r\n\r\n <!-- @if (icon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\r\n } -->\r\n\r\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\r\n @if (!iconOnly && !textSrc) {\r\n <span><ng-content></ng-content></span>\r\n }\r\n\r\n <!-- If textSrc is given -->\r\n @if (!iconOnly && textSrc) {\r\n <span>{{ textSrc }}</span>\r\n }\r\n\r\n <!-- @if (icon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\r\n } -->\r\n</a>", styles: [":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-btn{padding:5px 12px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:400;line-height:18px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-sm{padding:4px 12px;border:1px solid transparent;border-radius:6px;font-size:13px;font-weight:400;line-height:16px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-md{padding:7px 12px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:400;line-height:18px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-lg{padding:8px 16px;border:1px solid transparent;border-radius:8px;font-size:16px;font-weight:400;line-height:20px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-default{background-color:transparent;border-color:var(--defaultborder);color:#171717}.ms-btn-default:hover{background-color:#e2e6ea;border-color:#b3b3b3}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40;border-color:var(--primary);outline:none}.ms-btn-default:active{background-color:#dae0e5;border-color:#a6a6a6}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65;background-color:#e2e6ea;cursor:not-allowed}.ms-btn-primary{background-color:var(--primary);border-color:var(--primary);color:#fff}.ms-btn-primary:hover{background-color:#0070d9;border-color:#006acc}.ms-btn-secondary{background-color:var(--secondary);border-color:var(--secondary);color:#fff}.ms-btn-secondary:hover{background-color:#5a6268;border-color:#545b62}.ms-btn-success{background-color:var(--success);border-color:var(--success);color:#fff}.ms-btn-success:hover{background-color:#218838;border-color:#1e7e34}.ms-btn-danger{background-color:var(--danger);border-color:var(--danger);color:#fff}.ms-btn-danger:hover{background-color:#c62c25;border-color:#bb2923}.ms-btn-warning{background-color:var(--warning);border-color:var(--warning);color:#fff}.ms-btn-warning:hover{background-color:#cf7100;border-color:#c26a00}.ms-btn-info{background-color:var(--info);border-color:var(--info);color:#fff}.ms-btn-info:hover{background-color:#138496;border-color:#117a8b}.ms-btn-light{background-color:var(--light);border-color:var(--light);color:#212529}.ms-btn-light:hover{background-color:#e2e6ea;border-color:#dae0e5}.ms-btn-dark{background-color:var(--dark);border-color:var(--dark);color:#fff}.ms-btn-dark:hover{background-color:#23272b;border-color:#1d2124}.ms-btn-link{background-color:transparent;border-color:transparent;color:var(--link)}.ms-btn-link:hover{color:#0056b3;text-decoration:underline}.ms-btn-subtle{background-color:transparent;border-color:transparent;color:#000}.ms-btn-subtle:hover{color:#000}.ms-btn-skeleton{background:var(--skeleton);background-size:200% 100%;animation:shimmer 1.5s infinite;color:transparent;border-color:#ebebeb;cursor:default}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}h1{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-1%;margin:0%}h2{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-1%;margin:0%}h3{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-1%;margin:0%}p,div,span{font-size:16px;line-height:20px;font-weight:400;letter-spacing:0%}.ms-card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.75rem}.ms-card-header{padding:10px 16px;margin-bottom:0;border-bottom:1px solid rgba(0,0,0,.125);border-top-left-radius:calc(.75rem - 1px);border-top-right-radius:calc(.75rem - 1px)}.ms-card-toolbar{padding:10px 16px;margin-bottom:0;border-bottom:1px solid rgba(0,0,0,.125)}.ms-card-body{flex:1 1 auto;padding:16px}.ms-card-title{margin-top:.5rem;margin-bottom:.5rem;font-size:1.25rem;font-weight:500}.ms-card-text{margin-top:0;margin-bottom:1rem}.ms-text-primary{color:var(--primary)}.ms-text-secondary{color:var(--secondary)}.ms-text-success{color:var(--success)}.ms-text-danger{color:var(--danger)}.ms-text-warning{color:var(--warning)}.ms-text-info{color:var(--info)}.ms-text-light{color:var(--light)}.ms-text-dark{color:var(--dark)}.ms-text-link{color:var(--link)}.ms-text-muted{color:var(--muted)}.ms-f-w-100{font-weight:100}.ms-f-w-200{font-weight:200}.ms-f-w-300{font-weight:300}.ms-f-w-400{font-weight:400}.ms-f-w-500{font-weight:500}.ms-f-w-600{font-weight:600}.ms-f-w-700{font-weight:700}.ms-f-w-800{font-weight:800}.ms-f-w-900{font-weight:900}.ms-fs-8{font-size:8px}.ms-fs-10{font-size:10px}.ms-fs-12{font-size:12px}.ms-fs-14{font-size:14px}.ms-fs-16{font-size:16px}.ms-fs-18{font-size:18px}.ms-fs-20{font-size:20px}.ms-fs-22{font-size:22px}.ms-fs-24{font-size:24px}.ms-fs-26{font-size:26px}.ms-fs-28{font-size:28px}.ms-fs-30{font-size:30px}.ms-fs-32{font-size:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
82
+ }
83
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, decorators: [{
84
+ type: Component,
85
+ args: [{ selector: 'ms-button', standalone: true, imports: [CommonModule], template: "<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\r\n\r\n <!-- @if (icon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\r\n } -->\r\n\r\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\r\n @if (!iconOnly && !textSrc) {\r\n <span><ng-content></ng-content></span>\r\n }\r\n\r\n <!-- If textSrc is given -->\r\n @if (!iconOnly && textSrc) {\r\n <span>{{ textSrc }}</span>\r\n }\r\n\r\n <!-- @if (icon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\r\n } -->\r\n</a>", styles: [":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-btn{padding:5px 12px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:400;line-height:18px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-sm{padding:4px 12px;border:1px solid transparent;border-radius:6px;font-size:13px;font-weight:400;line-height:16px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-md{padding:7px 12px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:400;line-height:18px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-lg{padding:8px 16px;border:1px solid transparent;border-radius:8px;font-size:16px;font-weight:400;line-height:20px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.ms-btn-default{background-color:transparent;border-color:var(--defaultborder);color:#171717}.ms-btn-default:hover{background-color:#e2e6ea;border-color:#b3b3b3}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40;border-color:var(--primary);outline:none}.ms-btn-default:active{background-color:#dae0e5;border-color:#a6a6a6}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65;background-color:#e2e6ea;cursor:not-allowed}.ms-btn-primary{background-color:var(--primary);border-color:var(--primary);color:#fff}.ms-btn-primary:hover{background-color:#0070d9;border-color:#006acc}.ms-btn-secondary{background-color:var(--secondary);border-color:var(--secondary);color:#fff}.ms-btn-secondary:hover{background-color:#5a6268;border-color:#545b62}.ms-btn-success{background-color:var(--success);border-color:var(--success);color:#fff}.ms-btn-success:hover{background-color:#218838;border-color:#1e7e34}.ms-btn-danger{background-color:var(--danger);border-color:var(--danger);color:#fff}.ms-btn-danger:hover{background-color:#c62c25;border-color:#bb2923}.ms-btn-warning{background-color:var(--warning);border-color:var(--warning);color:#fff}.ms-btn-warning:hover{background-color:#cf7100;border-color:#c26a00}.ms-btn-info{background-color:var(--info);border-color:var(--info);color:#fff}.ms-btn-info:hover{background-color:#138496;border-color:#117a8b}.ms-btn-light{background-color:var(--light);border-color:var(--light);color:#212529}.ms-btn-light:hover{background-color:#e2e6ea;border-color:#dae0e5}.ms-btn-dark{background-color:var(--dark);border-color:var(--dark);color:#fff}.ms-btn-dark:hover{background-color:#23272b;border-color:#1d2124}.ms-btn-link{background-color:transparent;border-color:transparent;color:var(--link)}.ms-btn-link:hover{color:#0056b3;text-decoration:underline}.ms-btn-subtle{background-color:transparent;border-color:transparent;color:#000}.ms-btn-subtle:hover{color:#000}.ms-btn-skeleton{background:var(--skeleton);background-size:200% 100%;animation:shimmer 1.5s infinite;color:transparent;border-color:#ebebeb;cursor:default}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}h1{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-1%;margin:0%}h2{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-1%;margin:0%}h3{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-1%;margin:0%}p,div,span{font-size:16px;line-height:20px;font-weight:400;letter-spacing:0%}.ms-card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.75rem}.ms-card-header{padding:10px 16px;margin-bottom:0;border-bottom:1px solid rgba(0,0,0,.125);border-top-left-radius:calc(.75rem - 1px);border-top-right-radius:calc(.75rem - 1px)}.ms-card-toolbar{padding:10px 16px;margin-bottom:0;border-bottom:1px solid rgba(0,0,0,.125)}.ms-card-body{flex:1 1 auto;padding:16px}.ms-card-title{margin-top:.5rem;margin-bottom:.5rem;font-size:1.25rem;font-weight:500}.ms-card-text{margin-top:0;margin-bottom:1rem}.ms-text-primary{color:var(--primary)}.ms-text-secondary{color:var(--secondary)}.ms-text-success{color:var(--success)}.ms-text-danger{color:var(--danger)}.ms-text-warning{color:var(--warning)}.ms-text-info{color:var(--info)}.ms-text-light{color:var(--light)}.ms-text-dark{color:var(--dark)}.ms-text-link{color:var(--link)}.ms-text-muted{color:var(--muted)}.ms-f-w-100{font-weight:100}.ms-f-w-200{font-weight:200}.ms-f-w-300{font-weight:300}.ms-f-w-400{font-weight:400}.ms-f-w-500{font-weight:500}.ms-f-w-600{font-weight:600}.ms-f-w-700{font-weight:700}.ms-f-w-800{font-weight:800}.ms-f-w-900{font-weight:900}.ms-fs-8{font-size:8px}.ms-fs-10{font-size:10px}.ms-fs-12{font-size:12px}.ms-fs-14{font-size:14px}.ms-fs-16{font-size:16px}.ms-fs-18{font-size:18px}.ms-fs-20{font-size:20px}.ms-fs-22{font-size:22px}.ms-fs-24{font-size:24px}.ms-fs-26{font-size:26px}.ms-fs-28{font-size:28px}.ms-fs-30{font-size:30px}.ms-fs-32{font-size:32px}\n"] }]
86
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
87
+ type: Input
88
+ }], variant: [{
89
+ type: Input
90
+ }], size: [{
91
+ type: Input
92
+ }], radiussize: [{
93
+ type: Input
94
+ }], block: [{
95
+ type: Input
96
+ }], disabled: [{
97
+ type: Input
98
+ }], textSrc: [{
99
+ type: Input
100
+ }], icon: [{
101
+ type: Input
102
+ }], iconPosition: [{
103
+ type: Input
104
+ }], iconOnly: [{
105
+ type: Input
106
+ }], class: [{
107
+ type: Input
108
+ }], htmlChange: [{
109
+ type: Output
110
+ }], projectedContent: [{
111
+ type: ContentChild,
112
+ args: ['projectedContent', { static: false }]
113
+ }] } });
114
+
115
+ class MsDropdown {
116
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
117
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDropdown, isStandalone: true, selector: "ms-dropdown", ngImport: i0, template: "<p>dropdown works!</p>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
118
+ }
119
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, decorators: [{
120
+ type: Component,
121
+ args: [{ selector: 'ms-dropdown', standalone: true, imports: [CommonModule], template: "<p>dropdown works!</p>\r\n" }]
122
+ }] });
123
+
124
+ class MsDesignSystemModule {
125
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
126
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, imports: [MsButton, MsDropdown], exports: [MsButton, MsDropdown] });
127
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, imports: [MsButton, MsDropdown] });
128
+ }
129
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDesignSystemModule, decorators: [{
130
+ type: NgModule,
131
+ args: [{
132
+ imports: [MsButton, MsDropdown], // standalone components can be imported
133
+ exports: [MsButton, MsDropdown]
134
+ }]
135
+ }] });
136
+
137
+ function provideMsDesignSystem() {
138
+ return makeEnvironmentProviders([]);
139
+ }
140
+
141
+ // Components
142
+
143
+ /**
144
+ * Generated bundle index. Do not edit.
145
+ */
146
+
147
+ export { MsButton, MsDesignSystemModule, MsDropdown, provideMsDesignSystem };
148
+ //# sourceMappingURL=ms-ui-library.mjs.map
package/fesm2022/ms-ui-library.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ms-ui-library.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-ui-library.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\r\n\r\n\r\ntype IconPosition = 'prefix' | 'suffix';\r\n\r\n@Component({\r\n selector: 'ms-button',\r\n standalone: true,\r\n imports: [CommonModule],\r\n templateUrl: './ms-button.component.html',\r\n styleUrls: ['./ms-button.component.scss']\r\n})\r\nexport class MsButton implements OnChanges, OnInit {\r\n @Input() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Input() variant: string = '';\r\n @Input() size: string = 'md';\r\n @Input() radiussize: string = 'none';\r\n @Input() block: boolean = false;\r\n @Input() disabled: boolean = false;\r\n @Input() textSrc: string = '';\r\n\r\n // Icon support\r\n @Input() icon: string | null = null; // e.g. 'fa fa-plus' or 'bi bi-search'\r\n @Input() iconPosition: IconPosition = 'prefix'; // 'prefix' or 'suffix'\r\n @Input() iconOnly: boolean = false; // icon-only mode (no text)\r\n\r\n @Input() class: string = '';\r\n @Output() htmlChange = new EventEmitter<string>();\r\n @ContentChild('projectedContent', { static: false }) projectedContent: any;\r\n /** Dynamic class computation */\r\n get classes(): string {\r\n const radiusClass = this.radiussize !== 'none' ? `rounded-${this.radiussize}` : '';\r\n\r\n return [\r\n `ms-btn`,\r\n `d-flex`,\r\n `ms-btn-${this.variant}`,\r\n `ms-btn-${this.size}`,\r\n radiusClass,\r\n this.block ? 'block' : '',\r\n this.iconOnly ? 'icon-only' : ''\r\n ]\r\n .filter(Boolean)\r\n .join(' ')\r\n .trim();\r\n }\r\n\r\n get userClass() {\r\n return this.class;\r\n }\r\n\r\n /** Generate HTML string */\r\n getHtmlString(): string {\r\n const disabledAttr = this.disabled ? ' disabled' : '';\r\n const iconHtml = this.icon\r\n ? `<i class=\"${this.icon}\"></i>`\r\n : '';\r\n\r\n let innerHtml = '';\r\n\r\n if (this.iconOnly) {\r\n // Icon-only → just icon, centered\r\n innerHtml = `<i class=\"${this.icon} btn-icon\"></i>`;\r\n }\r\n else if (this.icon && this.iconPosition === 'prefix') {\r\n // Prefix → icon before text\r\n innerHtml = `<i class=\"${this.icon} btn-icon prefix\"></i> ${this.textSrc}`;\r\n }\r\n else if (this.icon && this.iconPosition === 'suffix') {\r\n // Suffix → icon after text\r\n innerHtml = `${this.textSrc} <i class=\"${this.icon} btn-icon suffix\"></i>`;\r\n }\r\n else {\r\n // Text only\r\n innerHtml = this.textSrc;\r\n }\r\n\r\n\r\n return `<ms-button type=\"${this.type}\" class=\"${this.classes}\"${disabledAttr}>${innerHtml}</ms-button>`;\r\n }\r\n\r\n\r\n constructor(private el: ElementRef) { }\r\n\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n this.htmlChange.emit(this.getHtmlString());\r\n }\r\n\r\n ngOnInit(): void {\r\n this.htmlChange.emit(this.getHtmlString());\r\n }\r\n\r\n ngAfterContentInit() {\r\n const inner = this.el.nativeElement.innerText.trim();\r\n if (inner && !this.textSrc) {\r\n this.textSrc = inner;\r\n }\r\n }\r\n\r\n}\r\n\r\n","<a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\">\r\n\r\n <!-- @if (icon && iconPosition === 'prefix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\r\n } -->\r\n\r\n <!-- 👇 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\r\n @if (!iconOnly && !textSrc) {\r\n <span><ng-content></ng-content></span>\r\n }\r\n\r\n <!-- If textSrc is given -->\r\n @if (!iconOnly && textSrc) {\r\n <span>{{ textSrc }}</span>\r\n }\r\n\r\n <!-- @if (icon && iconPosition === 'suffix') {\r\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\r\n } -->\r\n</a>","import { CommonModule } from '@angular/common';\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'ms-dropdown',\r\n standalone: true,\r\n imports: [CommonModule],\r\n templateUrl: './dropdown.html',\r\n styleUrls: ['./dropdown.scss']\r\n})\r\nexport class MsDropdown {\r\n\r\n}\r\n","<p>dropdown works!</p>\r\n","import { NgModule } from '@angular/core';\r\nimport { MsButton } from './components/button/ms-button.component';\r\nimport { MsDropdown } from './components/dropdown/dropdown';\r\n\r\n@NgModule({\r\n imports: [MsButton, MsDropdown], // standalone components can be imported\r\n exports: [MsButton, MsDropdown]\r\n})\r\nexport class MsDesignSystemModule {}\r\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\r\n\r\nexport function provideMsDesignSystem(): EnvironmentProviders {\r\n return makeEnvironmentProviders([]);\r\n}\r\n","// Components\r\nexport * from './components/button/ms-button.component';\r\nexport * from './components/dropdown/dropdown';\r\n\r\n// NgModule\r\nexport * from './ms-design-system.module';\r\n\r\n// Providers\r\nexport * from './providers/ms-design-system';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,11 +1,24 @@
1
1
  {
2
2
  "name": "ms-design-system",
3
- "version": "0.0.2",
4
- "main": "src/index.ts",
3
+ "version": "0.0.6",
4
+ "description": "MS Design System UI Library",
5
+ "keywords": [
6
+ "angular",
7
+ "ui",
8
+ "components",
9
+ "design-system"
10
+ ],
11
+ "author": "MS Team",
12
+ "license": "MIT",
13
+ "repository": {
14
+ "type": "git",
15
+ "url": "http://gitlab.4iisolutions.com/root/ms-design-system.git"
16
+ },
5
17
  "peerDependencies": {
6
18
  "@angular/common": "^21.0.0",
7
19
  "@angular/core": "^21.0.0"
8
20
  },
21
+ "sideEffects": false,
9
22
  "module": "fesm2022/ms-design-system.mjs",
10
23
  "typings": "types/ms-design-system.d.ts",
11
24
  "exports": {
@@ -17,7 +30,6 @@
17
30
  "default": "./fesm2022/ms-design-system.mjs"
18
31
  }
19
32
  },
20
- "sideEffects": false,
21
33
  "dependencies": {
22
34
  "tslib": "^2.3.0"
23
35
  }
package/types/ms-design-system.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as i0 from '@angular/core';
2
- import { OnChanges, EventEmitter, ElementRef, SimpleChanges } from '@angular/core';
2
+ import { OnChanges, OnInit, EventEmitter, ElementRef, SimpleChanges, EnvironmentProviders } from '@angular/core';
3
3
 
4
4
  type IconPosition = 'prefix' | 'suffix';
5
- declare class MsButton implements OnChanges {
5
+ declare class MsButton implements OnChanges, OnInit {
6
6
  private el;
7
7
  type: 'button' | 'submit' | 'reset';
8
8
  variant: string;
@@ -30,4 +30,17 @@ declare class MsButton implements OnChanges {
30
30
  static ɵcmp: i0.ɵɵComponentDeclaration<MsButton, "ms-button", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "radiussize": { "alias": "radiussize"; "required": false; }; "block": { "alias": "block"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "textSrc": { "alias": "textSrc"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "htmlChange": "htmlChange"; }, ["projectedContent"], ["*"], true, never>;
31
31
  }
32
32
 
33
- export { MsButton };
33
+ declare class MsDropdown {
34
+ static ɵfac: i0.ɵɵFactoryDeclaration<MsDropdown, never>;
35
+ static ɵcmp: i0.ɵɵComponentDeclaration<MsDropdown, "ms-dropdown", never, {}, {}, never, never, true, never>;
36
+ }
37
+
38
+ declare class MsDesignSystemModule {
39
+ static ɵfac: i0.ɵɵFactoryDeclaration<MsDesignSystemModule, never>;
40
+ static ɵmod: i0.ɵɵNgModuleDeclaration<MsDesignSystemModule, never, [typeof MsButton, typeof MsDropdown], [typeof MsButton, typeof MsDropdown]>;
41
+ static ɵinj: i0.ɵɵInjectorDeclaration<MsDesignSystemModule>;
42
+ }
43
+
44
+ declare function provideMsDesignSystem(): EnvironmentProviders;
45
+
46
+ export { MsButton, MsDesignSystemModule, MsDropdown, provideMsDesignSystem };
package/types/ms-ui-library.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import * as i0 from '@angular/core';
2
+ import { OnChanges, OnInit, EventEmitter, ElementRef, SimpleChanges, EnvironmentProviders } from '@angular/core';
3
+
4
+ type IconPosition = 'prefix' | 'suffix';
5
+ declare class MsButton implements OnChanges, OnInit {
6
+ private el;
7
+ type: 'button' | 'submit' | 'reset';
8
+ variant: string;
9
+ size: string;
10
+ radiussize: string;
11
+ block: boolean;
12
+ disabled: boolean;
13
+ textSrc: string;
14
+ icon: string | null;
15
+ iconPosition: IconPosition;
16
+ iconOnly: boolean;
17
+ class: string;
18
+ htmlChange: EventEmitter<string>;
19
+ projectedContent: any;
20
+ /** Dynamic class computation */
21
+ get classes(): string;
22
+ get userClass(): string;
23
+ /** Generate HTML string */
24
+ getHtmlString(): string;
25
+ constructor(el: ElementRef);
26
+ ngOnChanges(changes: SimpleChanges): void;
27
+ ngOnInit(): void;
28
+ ngAfterContentInit(): void;
29
+ static ɵfac: i0.ɵɵFactoryDeclaration<MsButton, never>;
30
+ static ɵcmp: i0.ɵɵComponentDeclaration<MsButton, "ms-button", never, { "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "radiussize": { "alias": "radiussize"; "required": false; }; "block": { "alias": "block"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "textSrc": { "alias": "textSrc"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "htmlChange": "htmlChange"; }, ["projectedContent"], ["*"], true, never>;
31
+ }
32
+
33
+ declare class MsDropdown {
34
+ static ɵfac: i0.ɵɵFactoryDeclaration<MsDropdown, never>;
35
+ static ɵcmp: i0.ɵɵComponentDeclaration<MsDropdown, "ms-dropdown", never, {}, {}, never, never, true, never>;
36
+ }
37
+
38
+ declare class MsDesignSystemModule {
39
+ static ɵfac: i0.ɵɵFactoryDeclaration<MsDesignSystemModule, never>;
40
+ static ɵmod: i0.ɵɵNgModuleDeclaration<MsDesignSystemModule, never, [typeof MsButton, typeof MsDropdown], [typeof MsButton, typeof MsDropdown]>;
41
+ static ɵinj: i0.ɵɵInjectorDeclaration<MsDesignSystemModule>;
42
+ }
43
+
44
+ declare function provideMsDesignSystem(): EnvironmentProviders;
45
+
46
+ export { MsButton, MsDesignSystemModule, MsDropdown, provideMsDesignSystem };