@beshkari/mb-ui 0.5.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +98 -0
- package/esm2022/beshkari-mb-ui.mjs +5 -0
- package/esm2022/lib/accordion/mb-accordion.component.mjs +37 -0
- package/esm2022/lib/alert/mb-alert.component.mjs +28 -0
- package/esm2022/lib/avatar/mb-avatar.component.mjs +32 -0
- package/esm2022/lib/badge/mb-badge.component.mjs +28 -0
- package/esm2022/lib/breadcrumb/mb-breadcrumb.component.mjs +23 -0
- package/esm2022/lib/button/mb-button.component.mjs +48 -0
- package/esm2022/lib/card/mb-card.component.mjs +28 -0
- package/esm2022/lib/checkbox/mb-checkbox.component.mjs +75 -0
- package/esm2022/lib/chip/mb-chip.component.mjs +33 -0
- package/esm2022/lib/combobox/mb-combobox.component.mjs +235 -0
- package/esm2022/lib/confirm/mb-confirm-dialog.component.mjs +44 -0
- package/esm2022/lib/confirm/mb-confirm.service.mjs +39 -0
- package/esm2022/lib/confirm/mb-confirm.types.mjs +2 -0
- package/esm2022/lib/datepicker/mb-datepicker.component.mjs +382 -0
- package/esm2022/lib/dialog/mb-dialog-container.component.mjs +37 -0
- package/esm2022/lib/dialog/mb-dialog-ref.mjs +17 -0
- package/esm2022/lib/dialog/mb-dialog.component.mjs +87 -0
- package/esm2022/lib/dialog/mb-dialog.service.mjs +61 -0
- package/esm2022/lib/dialog/mb-dialog.tokens.mjs +3 -0
- package/esm2022/lib/divider/mb-divider.component.mjs +18 -0
- package/esm2022/lib/drawer/mb-drawer.component.mjs +34 -0
- package/esm2022/lib/dropdown/mb-dropdown.component.mjs +24 -0
- package/esm2022/lib/empty/mb-empty.component.mjs +27 -0
- package/esm2022/lib/form-field/mb-form-field.component.mjs +24 -0
- package/esm2022/lib/grid/mb-grid-data.mjs +266 -0
- package/esm2022/lib/grid/mb-grid-export.mjs +36 -0
- package/esm2022/lib/grid/mb-grid-messages.mjs +10 -0
- package/esm2022/lib/grid/mb-grid-state-adapter.mjs +97 -0
- package/esm2022/lib/grid/mb-grid-state.service.mjs +47 -0
- package/esm2022/lib/grid/mb-grid-template.directive.mjs +109 -0
- package/esm2022/lib/grid/mb-grid.component.mjs +998 -0
- package/esm2022/lib/grid/mb-grid.types.mjs +2 -0
- package/esm2022/lib/i18n/mb-ui-locale.mjs +18 -0
- package/esm2022/lib/i18n/mb-ui-messages-en.mjs +103 -0
- package/esm2022/lib/i18n/mb-ui-messages-fa.mjs +103 -0
- package/esm2022/lib/i18n/mb-ui-messages.mjs +34 -0
- package/esm2022/lib/i18n/mb-ui-messages.types.mjs +2 -0
- package/esm2022/lib/i18n/provide-mb-ui.mjs +20 -0
- package/esm2022/lib/input/mb-input.component.mjs +86 -0
- package/esm2022/lib/pagination/mb-pagination.component.mjs +47 -0
- package/esm2022/lib/progress/mb-progress.component.mjs +29 -0
- package/esm2022/lib/radio/mb-radio-group.component.mjs +63 -0
- package/esm2022/lib/select/mb-select.component.mjs +73 -0
- package/esm2022/lib/skeleton/mb-skeleton.component.mjs +24 -0
- package/esm2022/lib/spinner/mb-spinner.component.mjs +21 -0
- package/esm2022/lib/switch/mb-switch.component.mjs +59 -0
- package/esm2022/lib/tabs/mb-tabs.component.mjs +31 -0
- package/esm2022/lib/textarea/mb-textarea.component.mjs +83 -0
- package/esm2022/lib/toast/mb-toast-container.component.mjs +21 -0
- package/esm2022/lib/toast/mb-toast.service.mjs +47 -0
- package/esm2022/lib/toast/mb-toast.types.mjs +2 -0
- package/esm2022/lib/tokens/mb-ui-config.token.mjs +11 -0
- package/esm2022/lib/tooltip/mb-tooltip.directive.mjs +48 -0
- package/esm2022/lib/utils/coerce.mjs +10 -0
- package/esm2022/lib/utils/mb-jalali-date.mjs +120 -0
- package/esm2022/public-api.mjs +56 -0
- package/fesm2022/beshkari-mb-ui.mjs +3828 -0
- package/fesm2022/beshkari-mb-ui.mjs.map +1 -0
- package/index.d.ts +5 -0
- package/lib/accordion/mb-accordion.component.d.ts +19 -0
- package/lib/alert/mb-alert.component.d.ts +12 -0
- package/lib/avatar/mb-avatar.component.d.ts +12 -0
- package/lib/badge/mb-badge.component.d.ts +12 -0
- package/lib/breadcrumb/mb-breadcrumb.component.d.ts +15 -0
- package/lib/button/mb-button.component.d.ts +19 -0
- package/lib/card/mb-card.component.d.ts +10 -0
- package/lib/checkbox/mb-checkbox.component.d.ts +25 -0
- package/lib/chip/mb-chip.component.d.ts +12 -0
- package/lib/combobox/mb-combobox.component.d.ts +65 -0
- package/lib/confirm/mb-confirm-dialog.component.d.ts +17 -0
- package/lib/confirm/mb-confirm.service.d.ts +12 -0
- package/lib/confirm/mb-confirm.types.d.ts +10 -0
- package/lib/datepicker/mb-datepicker.component.d.ts +87 -0
- package/lib/dialog/mb-dialog-container.component.d.ts +14 -0
- package/lib/dialog/mb-dialog-ref.d.ts +9 -0
- package/lib/dialog/mb-dialog.component.d.ts +27 -0
- package/lib/dialog/mb-dialog.service.d.ts +14 -0
- package/lib/dialog/mb-dialog.tokens.d.ts +13 -0
- package/lib/divider/mb-divider.component.d.ts +7 -0
- package/lib/drawer/mb-drawer.component.d.ts +14 -0
- package/lib/dropdown/mb-dropdown.component.d.ts +10 -0
- package/lib/empty/mb-empty.component.d.ts +10 -0
- package/lib/form-field/mb-form-field.component.d.ts +9 -0
- package/lib/grid/mb-grid-data.d.ts +20 -0
- package/lib/grid/mb-grid-export.d.ts +9 -0
- package/lib/grid/mb-grid-messages.d.ts +6 -0
- package/lib/grid/mb-grid-state-adapter.d.ts +24 -0
- package/lib/grid/mb-grid-state.service.d.ts +10 -0
- package/lib/grid/mb-grid-template.directive.d.ts +43 -0
- package/lib/grid/mb-grid.component.d.ts +233 -0
- package/lib/grid/mb-grid.types.d.ts +255 -0
- package/lib/i18n/mb-ui-locale.d.ts +2 -0
- package/lib/i18n/mb-ui-messages-en.d.ts +3 -0
- package/lib/i18n/mb-ui-messages-fa.d.ts +3 -0
- package/lib/i18n/mb-ui-messages.d.ts +5 -0
- package/lib/i18n/mb-ui-messages.types.d.ts +90 -0
- package/lib/i18n/provide-mb-ui.d.ts +7 -0
- package/lib/input/mb-input.component.d.ts +30 -0
- package/lib/pagination/mb-pagination.component.d.ts +16 -0
- package/lib/progress/mb-progress.component.d.ts +11 -0
- package/lib/radio/mb-radio-group.component.d.ts +30 -0
- package/lib/select/mb-select.component.d.ts +31 -0
- package/lib/skeleton/mb-skeleton.component.d.ts +9 -0
- package/lib/spinner/mb-spinner.component.d.ts +9 -0
- package/lib/switch/mb-switch.component.d.ts +22 -0
- package/lib/tabs/mb-tabs.component.d.ts +19 -0
- package/lib/textarea/mb-textarea.component.d.ts +29 -0
- package/lib/toast/mb-toast-container.component.d.ts +10 -0
- package/lib/toast/mb-toast.service.d.ts +15 -0
- package/lib/toast/mb-toast.types.d.ts +8 -0
- package/lib/tokens/mb-ui-config.token.d.ts +12 -0
- package/lib/tooltip/mb-tooltip.directive.d.ts +13 -0
- package/lib/utils/coerce.d.ts +3 -0
- package/lib/utils/mb-jalali-date.d.ts +18 -0
- package/package.json +50 -0
- package/public-api.d.ts +55 -0
- package/theme/_components.scss +19 -0
- package/theme/_dark.scss +1 -0
- package/theme/_density.scss +1 -0
- package/theme/_tokens.scss +57 -0
- package/theme/mb-ui.scss +28 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Mohammad Beshkari
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# mb-ui
|
|
2
|
+
|
|
3
|
+
`mb-ui` is a modern Angular UI library for enterprise/admin projects. English (`en-US`) is the default language; Persian (`fa-IR`) and RTL layouts are fully supported.
|
|
4
|
+
|
|
5
|
+
It uses independent source code, styling, selectors, and APIs.
|
|
6
|
+
|
|
7
|
+
## Status
|
|
8
|
+
|
|
9
|
+
Version: `0.5.0-alpha.1`
|
|
10
|
+
|
|
11
|
+
This package is an alpha distribution. It contains a usable base set of UI components plus an enterprise-oriented Grid foundation.
|
|
12
|
+
|
|
13
|
+
## Main components
|
|
14
|
+
|
|
15
|
+
- Button, Input, Textarea, Select, Datepicker
|
|
16
|
+
- Checkbox, Switch, Radio Group
|
|
17
|
+
- Grid: paging, sorting, filtering, selection, grouping base, templates, export helpers, state persistence, Laravel/OData adapters
|
|
18
|
+
- Dialog, Drawer, Dropdown, Tooltip, Toast, Confirm service
|
|
19
|
+
- Card, Badge, Chip, Avatar, Divider
|
|
20
|
+
- Alert, Spinner, Skeleton, Progress, Empty
|
|
21
|
+
- Tabs, Accordion, Breadcrumb, Pagination
|
|
22
|
+
|
|
23
|
+
## Install
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @beshkari/mb-ui @angular/cdk
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Include the theme in your app global stylesheet:
|
|
30
|
+
|
|
31
|
+
```scss
|
|
32
|
+
@use '@beshkari/mb-ui/theme';
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
For local development from source, clone the repository, install dependencies, and run the build script.
|
|
36
|
+
|
|
37
|
+
## Internationalization
|
|
38
|
+
|
|
39
|
+
Built-in locales: `en-US` (default) and `fa-IR`.
|
|
40
|
+
|
|
41
|
+
English is used out of the box. No extra setup is required for LTR apps.
|
|
42
|
+
|
|
43
|
+
### Persian / RTL
|
|
44
|
+
|
|
45
|
+
```typescript
|
|
46
|
+
import { provideMbUi } from '@beshkari/mb-ui';
|
|
47
|
+
|
|
48
|
+
export const appConfig = {
|
|
49
|
+
providers: [
|
|
50
|
+
provideMbUi({
|
|
51
|
+
locale: 'fa-IR',
|
|
52
|
+
direction: 'rtl',
|
|
53
|
+
}),
|
|
54
|
+
],
|
|
55
|
+
};
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Custom messages
|
|
59
|
+
|
|
60
|
+
```typescript
|
|
61
|
+
provideMbUi({
|
|
62
|
+
locale: 'en-US',
|
|
63
|
+
messages: {
|
|
64
|
+
grid: { searchPlaceholder: 'Search users...' },
|
|
65
|
+
},
|
|
66
|
+
});
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Grid, confirm, datepicker, forms, dialog, toast, and empty states read from `MB_UI_MESSAGES`. You can still override text per component with `@Input()` when needed.
|
|
70
|
+
|
|
71
|
+
## Example
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<mb-toast-container />
|
|
75
|
+
|
|
76
|
+
<mb-card title="Users" elevated>
|
|
77
|
+
<mb-button variant="primary">Save</mb-button>
|
|
78
|
+
<mb-switch label="Active only" [(ngModel)]="activeOnly" />
|
|
79
|
+
<mb-grid [data]="users" [columns]="columns" [pageable]="true" [sortable]="true" [filterable]="true" />
|
|
80
|
+
</mb-card>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
See `examples/full-library-dashboard-example.component.ts`.
|
|
84
|
+
|
|
85
|
+
## Publishing
|
|
86
|
+
|
|
87
|
+
Build and inspect the npm package before publishing:
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
npm ci
|
|
91
|
+
npm run pack:check
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
Publish only the generated package from `dist/mb-ui`:
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
npm run publish:npm
|
|
98
|
+
```
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generated bundle index. Do not edit.
|
|
3
|
+
*/
|
|
4
|
+
export * from './public-api';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmVzaGthcmktbWItdWkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYmVzaGthcmktbWItdWkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
|
|
2
|
+
import { NgFor, NgIf } from '@angular/common';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class MbAccordionComponent {
|
|
5
|
+
items = [];
|
|
6
|
+
multiple = false;
|
|
7
|
+
itemsChange = new EventEmitter();
|
|
8
|
+
hostClass = 'mb-accordion-host';
|
|
9
|
+
toggle(item) {
|
|
10
|
+
if (item.disabled)
|
|
11
|
+
return;
|
|
12
|
+
const next = this.items.map((candidate) => {
|
|
13
|
+
if (candidate.id === item.id)
|
|
14
|
+
return { ...candidate, open: !candidate.open };
|
|
15
|
+
return this.multiple ? candidate : { ...candidate, open: false };
|
|
16
|
+
});
|
|
17
|
+
this.items = next;
|
|
18
|
+
this.itemsChange.emit(next);
|
|
19
|
+
}
|
|
20
|
+
trackById(_, item) { return item.id; }
|
|
21
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbAccordionComponent, isStandalone: true, selector: "mb-accordion", inputs: { items: "items", multiple: "multiple" }, outputs: { itemsChange: "itemsChange" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"mb-accordion\">\n <section *ngFor=\"let item of items; trackBy: trackById\" class=\"mb-accordion__item\" [class.mb-accordion__item--open]=\"item.open\">\n <button type=\"button\" class=\"mb-accordion__header\" [disabled]=\"item.disabled\" (click)=\"toggle(item)\">\n <span>{{ item.title }}</span>\n <span aria-hidden=\"true\">\u2304</span>\n </button>\n <div class=\"mb-accordion__panel\" *ngIf=\"item.open\">\n <ng-container *ngIf=\"item.content; else projected\">{{ item.content }}</ng-container>\n <ng-template #projected><ng-content></ng-content></ng-template>\n </div>\n </section>\n</div>\n", styles: [".mb-accordion{border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-lg);overflow:hidden;background:var(--mb-color-bg)}.mb-accordion__item+.mb-accordion__item{border-block-start:1px solid var(--mb-color-border)}.mb-accordion__header{inline-size:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;border:0;background:transparent;color:var(--mb-color-text);cursor:pointer;font:inherit;font-weight:800;text-align:start}.mb-accordion__header:disabled{opacity:.55;cursor:not-allowed}.mb-accordion__item--open .mb-accordion__header span:last-child{transform:rotate(180deg)}.mb-accordion__panel{padding:0 1rem 1rem;color:var(--mb-color-muted);line-height:1.7}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
23
|
+
}
|
|
24
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbAccordionComponent, decorators: [{
|
|
25
|
+
type: Component,
|
|
26
|
+
args: [{ selector: 'mb-accordion', standalone: true, imports: [NgFor, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-accordion\">\n <section *ngFor=\"let item of items; trackBy: trackById\" class=\"mb-accordion__item\" [class.mb-accordion__item--open]=\"item.open\">\n <button type=\"button\" class=\"mb-accordion__header\" [disabled]=\"item.disabled\" (click)=\"toggle(item)\">\n <span>{{ item.title }}</span>\n <span aria-hidden=\"true\">\u2304</span>\n </button>\n <div class=\"mb-accordion__panel\" *ngIf=\"item.open\">\n <ng-container *ngIf=\"item.content; else projected\">{{ item.content }}</ng-container>\n <ng-template #projected><ng-content></ng-content></ng-template>\n </div>\n </section>\n</div>\n", styles: [".mb-accordion{border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-lg);overflow:hidden;background:var(--mb-color-bg)}.mb-accordion__item+.mb-accordion__item{border-block-start:1px solid var(--mb-color-border)}.mb-accordion__header{inline-size:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;border:0;background:transparent;color:var(--mb-color-text);cursor:pointer;font:inherit;font-weight:800;text-align:start}.mb-accordion__header:disabled{opacity:.55;cursor:not-allowed}.mb-accordion__item--open .mb-accordion__header span:last-child{transform:rotate(180deg)}.mb-accordion__panel{padding:0 1rem 1rem;color:var(--mb-color-muted);line-height:1.7}\n"] }]
|
|
27
|
+
}], propDecorators: { items: [{
|
|
28
|
+
type: Input
|
|
29
|
+
}], multiple: [{
|
|
30
|
+
type: Input
|
|
31
|
+
}], itemsChange: [{
|
|
32
|
+
type: Output
|
|
33
|
+
}], hostClass: [{
|
|
34
|
+
type: HostBinding,
|
|
35
|
+
args: ['class']
|
|
36
|
+
}] } });
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWItYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvYWNjb3JkaW9uL21iLWFjY29yZGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2FjY29yZGlvbi9tYi1hY2NvcmRpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDN0csT0FBTyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFVOUMsTUFBTSxPQUFPLG9CQUFvQjtJQUN0QixLQUFLLEdBQXNCLEVBQUUsQ0FBQztJQUM5QixRQUFRLEdBQUcsS0FBSyxDQUFDO0lBQ2hCLFdBQVcsR0FBRyxJQUFJLFlBQVksRUFBcUIsQ0FBQztJQUN4QyxTQUFTLEdBQUcsbUJBQW1CLENBQUM7SUFDdEQsTUFBTSxDQUFDLElBQXFCO1FBQzFCLElBQUksSUFBSSxDQUFDLFFBQVE7WUFBRSxPQUFPO1FBQzFCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsU0FBUyxFQUFFLEVBQUU7WUFDeEMsSUFBSSxTQUFTLENBQUMsRUFBRSxLQUFLLElBQUksQ0FBQyxFQUFFO2dCQUFFLE9BQU8sRUFBRSxHQUFHLFNBQVMsRUFBRSxJQUFJLEVBQUUsQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDN0UsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUUsR0FBRyxTQUFTLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDO1FBQ25FLENBQUMsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUM7UUFDbEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUNELFNBQVMsQ0FBQyxDQUFTLEVBQUUsSUFBcUIsSUFBWSxPQUFPLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO3dHQWQ1RCxvQkFBb0I7NEZBQXBCLG9CQUFvQix3TkNYakMscW9CQVlBLG93QkROWSxLQUFLLG1IQUFFLElBQUk7OzRGQUtWLG9CQUFvQjtrQkFSaEMsU0FBUzsrQkFDRSxjQUFjLGNBQ1osSUFBSSxXQUNQLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxtQkFHTCx1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDSSxXQUFXO3NCQUFwQixNQUFNO2dCQUNlLFNBQVM7c0JBQTlCLFdBQVc7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nRm9yLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmV4cG9ydCBpbnRlcmZhY2UgTWJBY2NvcmRpb25JdGVtIHsgaWQ6IHN0cmluZzsgdGl0bGU6IHN0cmluZzsgY29udGVudD86IHN0cmluZzsgZGlzYWJsZWQ/OiBib29sZWFuOyBvcGVuPzogYm9vbGVhbjsgfVxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWItYWNjb3JkaW9uJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW05nRm9yLCBOZ0lmXSxcbiAgdGVtcGxhdGVVcmw6ICcuL21iLWFjY29yZGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9tYi1hY2NvcmRpb24uY29tcG9uZW50LnNjc3MnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTWJBY2NvcmRpb25Db21wb25lbnQge1xuICBASW5wdXQoKSBpdGVtczogTWJBY2NvcmRpb25JdGVtW10gPSBbXTtcbiAgQElucHV0KCkgbXVsdGlwbGUgPSBmYWxzZTtcbiAgQE91dHB1dCgpIGl0ZW1zQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxNYkFjY29yZGlvbkl0ZW1bXT4oKTtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIGhvc3RDbGFzcyA9ICdtYi1hY2NvcmRpb24taG9zdCc7XG4gIHRvZ2dsZShpdGVtOiBNYkFjY29yZGlvbkl0ZW0pOiB2b2lkIHtcbiAgICBpZiAoaXRlbS5kaXNhYmxlZCkgcmV0dXJuO1xuICAgIGNvbnN0IG5leHQgPSB0aGlzLml0ZW1zLm1hcCgoY2FuZGlkYXRlKSA9PiB7XG4gICAgICBpZiAoY2FuZGlkYXRlLmlkID09PSBpdGVtLmlkKSByZXR1cm4geyAuLi5jYW5kaWRhdGUsIG9wZW46ICFjYW5kaWRhdGUub3BlbiB9O1xuICAgICAgcmV0dXJuIHRoaXMubXVsdGlwbGUgPyBjYW5kaWRhdGUgOiB7IC4uLmNhbmRpZGF0ZSwgb3BlbjogZmFsc2UgfTtcbiAgICB9KTtcbiAgICB0aGlzLml0ZW1zID0gbmV4dDtcbiAgICB0aGlzLml0ZW1zQ2hhbmdlLmVtaXQobmV4dCk7XG4gIH1cbiAgdHJhY2tCeUlkKF86IG51bWJlciwgaXRlbTogTWJBY2NvcmRpb25JdGVtKTogc3RyaW5nIHsgcmV0dXJuIGl0ZW0uaWQ7IH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJtYi1hY2NvcmRpb25cIj5cbiAgPHNlY3Rpb24gKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXM7IHRyYWNrQnk6IHRyYWNrQnlJZFwiIGNsYXNzPVwibWItYWNjb3JkaW9uX19pdGVtXCIgW2NsYXNzLm1iLWFjY29yZGlvbl9faXRlbS0tb3Blbl09XCJpdGVtLm9wZW5cIj5cbiAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cIm1iLWFjY29yZGlvbl9faGVhZGVyXCIgW2Rpc2FibGVkXT1cIml0ZW0uZGlzYWJsZWRcIiAoY2xpY2spPVwidG9nZ2xlKGl0ZW0pXCI+XG4gICAgICA8c3Bhbj57eyBpdGVtLnRpdGxlIH19PC9zcGFuPlxuICAgICAgPHNwYW4gYXJpYS1oaWRkZW49XCJ0cnVlXCI+4oyEPC9zcGFuPlxuICAgIDwvYnV0dG9uPlxuICAgIDxkaXYgY2xhc3M9XCJtYi1hY2NvcmRpb25fX3BhbmVsXCIgKm5nSWY9XCJpdGVtLm9wZW5cIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJpdGVtLmNvbnRlbnQ7IGVsc2UgcHJvamVjdGVkXCI+e3sgaXRlbS5jb250ZW50IH19PC9uZy1jb250YWluZXI+XG4gICAgICA8bmctdGVtcGxhdGUgI3Byb2plY3RlZD48bmctY29udGVudD48L25nLWNvbnRlbnQ+PC9uZy10ZW1wbGF0ZT5cbiAgICA8L2Rpdj5cbiAgPC9zZWN0aW9uPlxuPC9kaXY+XG4iXX0=
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
|
|
2
|
+
import { NgIf } from '@angular/common';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class MbAlertComponent {
|
|
5
|
+
variant = 'info';
|
|
6
|
+
title = '';
|
|
7
|
+
closable = false;
|
|
8
|
+
closed = new EventEmitter();
|
|
9
|
+
hostClass = 'mb-alert-host';
|
|
10
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbAlertComponent, isStandalone: true, selector: "mb-alert", inputs: { variant: "variant", title: "title", closable: "closable" }, outputs: { closed: "closed" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"mb-alert\" [class]=\"'mb-alert mb-alert--' + variant\" role=\"alert\">\n <div class=\"mb-alert__body\">\n <strong *ngIf=\"title\" class=\"mb-alert__title\">{{ title }}</strong>\n <div class=\"mb-alert__content\"><ng-content></ng-content></div>\n </div>\n <button *ngIf=\"closable\" type=\"button\" class=\"mb-alert__close\" (click)=\"closed.emit()\" aria-label=\"Close\">\u00D7</button>\n</div>\n", styles: [":host{display:block}.mb-alert{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-radius:var(--mb-radius-lg);border:1px solid transparent}.mb-alert__body{display:grid;gap:.25rem}.mb-alert__title{font-weight:850}.mb-alert__content{font-size:.9rem}.mb-alert__close{border:0;background:transparent;color:inherit;font-size:1.2rem;cursor:pointer}.mb-alert--info{background:var(--mb-color-primary-soft);color:var(--mb-color-primary)}.mb-alert--success{background:var(--mb-color-success-soft);color:var(--mb-color-success)}.mb-alert--warning{background:var(--mb-color-warning-soft);color:var(--mb-color-warning)}.mb-alert--danger{background:var(--mb-color-danger-soft);color:var(--mb-color-danger)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12
|
+
}
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbAlertComponent, decorators: [{
|
|
14
|
+
type: Component,
|
|
15
|
+
args: [{ selector: 'mb-alert', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-alert\" [class]=\"'mb-alert mb-alert--' + variant\" role=\"alert\">\n <div class=\"mb-alert__body\">\n <strong *ngIf=\"title\" class=\"mb-alert__title\">{{ title }}</strong>\n <div class=\"mb-alert__content\"><ng-content></ng-content></div>\n </div>\n <button *ngIf=\"closable\" type=\"button\" class=\"mb-alert__close\" (click)=\"closed.emit()\" aria-label=\"Close\">\u00D7</button>\n</div>\n", styles: [":host{display:block}.mb-alert{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-radius:var(--mb-radius-lg);border:1px solid transparent}.mb-alert__body{display:grid;gap:.25rem}.mb-alert__title{font-weight:850}.mb-alert__content{font-size:.9rem}.mb-alert__close{border:0;background:transparent;color:inherit;font-size:1.2rem;cursor:pointer}.mb-alert--info{background:var(--mb-color-primary-soft);color:var(--mb-color-primary)}.mb-alert--success{background:var(--mb-color-success-soft);color:var(--mb-color-success)}.mb-alert--warning{background:var(--mb-color-warning-soft);color:var(--mb-color-warning)}.mb-alert--danger{background:var(--mb-color-danger-soft);color:var(--mb-color-danger)}\n"] }]
|
|
16
|
+
}], propDecorators: { variant: [{
|
|
17
|
+
type: Input
|
|
18
|
+
}], title: [{
|
|
19
|
+
type: Input
|
|
20
|
+
}], closable: [{
|
|
21
|
+
type: Input
|
|
22
|
+
}], closed: [{
|
|
23
|
+
type: Output
|
|
24
|
+
}], hostClass: [{
|
|
25
|
+
type: HostBinding,
|
|
26
|
+
args: ['class']
|
|
27
|
+
}] } });
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWItYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9hbGVydC9tYi1hbGVydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2FsZXJ0L21iLWFsZXJ0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdHLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFVdkMsTUFBTSxPQUFPLGdCQUFnQjtJQUNsQixPQUFPLEdBQW1CLE1BQU0sQ0FBQztJQUNqQyxLQUFLLEdBQUcsRUFBRSxDQUFDO0lBQ1gsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUNoQixNQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztJQUN0QixTQUFTLEdBQUcsZUFBZSxDQUFDO3dHQUx2QyxnQkFBZ0I7NEZBQWhCLGdCQUFnQiw4TkNYN0Isb2FBT0EseXdCRERZLElBQUk7OzRGQUtILGdCQUFnQjtrQkFSNUIsU0FBUzsrQkFDRSxVQUFVLGNBQ1IsSUFBSSxXQUNQLENBQUMsSUFBSSxDQUFDLG1CQUdFLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLE9BQU87c0JBQWYsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDSSxNQUFNO3NCQUFmLE1BQU07Z0JBQ2UsU0FBUztzQkFBOUIsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5leHBvcnQgdHlwZSBNYkFsZXJ0VmFyaWFudCA9ICdpbmZvJyB8ICdzdWNjZXNzJyB8ICd3YXJuaW5nJyB8ICdkYW5nZXInO1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWItYWxlcnQnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdJZl0sXG4gIHRlbXBsYXRlVXJsOiAnLi9tYi1hbGVydC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9tYi1hbGVydC5jb21wb25lbnQuc2NzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBNYkFsZXJ0Q29tcG9uZW50IHtcbiAgQElucHV0KCkgdmFyaWFudDogTWJBbGVydFZhcmlhbnQgPSAnaW5mbyc7XG4gIEBJbnB1dCgpIHRpdGxlID0gJyc7XG4gIEBJbnB1dCgpIGNsb3NhYmxlID0gZmFsc2U7XG4gIEBPdXRwdXQoKSBjbG9zZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIEBIb3N0QmluZGluZygnY2xhc3MnKSBob3N0Q2xhc3MgPSAnbWItYWxlcnQtaG9zdCc7XG59XG4iLCI8ZGl2IGNsYXNzPVwibWItYWxlcnRcIiBbY2xhc3NdPVwiJ21iLWFsZXJ0IG1iLWFsZXJ0LS0nICsgdmFyaWFudFwiIHJvbGU9XCJhbGVydFwiPlxuICA8ZGl2IGNsYXNzPVwibWItYWxlcnRfX2JvZHlcIj5cbiAgICA8c3Ryb25nICpuZ0lmPVwidGl0bGVcIiBjbGFzcz1cIm1iLWFsZXJ0X190aXRsZVwiPnt7IHRpdGxlIH19PC9zdHJvbmc+XG4gICAgPGRpdiBjbGFzcz1cIm1iLWFsZXJ0X19jb250ZW50XCI+PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PjwvZGl2PlxuICA8L2Rpdj5cbiAgPGJ1dHRvbiAqbmdJZj1cImNsb3NhYmxlXCIgdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwibWItYWxlcnRfX2Nsb3NlXCIgKGNsaWNrKT1cImNsb3NlZC5lbWl0KClcIiBhcmlhLWxhYmVsPVwiQ2xvc2VcIj7DlzwvYnV0dG9uPlxuPC9kaXY+XG4iXX0=
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
|
|
2
|
+
import { NgIf } from '@angular/common';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class MbAvatarComponent {
|
|
5
|
+
src;
|
|
6
|
+
alt = '';
|
|
7
|
+
name = '';
|
|
8
|
+
size = 'md';
|
|
9
|
+
hostClass = 'mb-avatar-host';
|
|
10
|
+
get initials() {
|
|
11
|
+
const parts = this.name.trim().split(/\s+/).filter(Boolean);
|
|
12
|
+
return parts.slice(0, 2).map((p) => p[0]?.toUpperCase() ?? '').join('') || '?';
|
|
13
|
+
}
|
|
14
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbAvatarComponent, isStandalone: true, selector: "mb-avatar", inputs: { src: "src", alt: "alt", name: "name", size: "size" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"mb-avatar\" [class]=\"'mb-avatar mb-avatar--' + size\">\n <img *ngIf=\"src; else fallback\" [src]=\"src\" [alt]=\"alt || name\" />\n <ng-template #fallback>{{ initials }}</ng-template>\n</span>\n", styles: [":host{display:inline-flex}.mb-avatar{inline-size:2.3rem;block-size:2.3rem;border-radius:999px;overflow:hidden;display:inline-grid;place-items:center;background:var(--mb-color-primary-soft);color:var(--mb-color-primary);font-weight:800;border:1px solid var(--mb-color-border)}.mb-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.mb-avatar--sm{inline-size:1.75rem;block-size:1.75rem;font-size:.75rem}.mb-avatar--lg{inline-size:3rem;block-size:3rem;font-size:1.1rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16
|
+
}
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbAvatarComponent, decorators: [{
|
|
18
|
+
type: Component,
|
|
19
|
+
args: [{ selector: 'mb-avatar', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"mb-avatar\" [class]=\"'mb-avatar mb-avatar--' + size\">\n <img *ngIf=\"src; else fallback\" [src]=\"src\" [alt]=\"alt || name\" />\n <ng-template #fallback>{{ initials }}</ng-template>\n</span>\n", styles: [":host{display:inline-flex}.mb-avatar{inline-size:2.3rem;block-size:2.3rem;border-radius:999px;overflow:hidden;display:inline-grid;place-items:center;background:var(--mb-color-primary-soft);color:var(--mb-color-primary);font-weight:800;border:1px solid var(--mb-color-border)}.mb-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.mb-avatar--sm{inline-size:1.75rem;block-size:1.75rem;font-size:.75rem}.mb-avatar--lg{inline-size:3rem;block-size:3rem;font-size:1.1rem}\n"] }]
|
|
20
|
+
}], propDecorators: { src: [{
|
|
21
|
+
type: Input
|
|
22
|
+
}], alt: [{
|
|
23
|
+
type: Input
|
|
24
|
+
}], name: [{
|
|
25
|
+
type: Input
|
|
26
|
+
}], size: [{
|
|
27
|
+
type: Input
|
|
28
|
+
}], hostClass: [{
|
|
29
|
+
type: HostBinding,
|
|
30
|
+
args: ['class']
|
|
31
|
+
}] } });
|
|
32
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWItYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvYXZhdGFyL21iLWF2YXRhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2F2YXRhci9tYi1hdmF0YXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFXdkMsTUFBTSxPQUFPLGlCQUFpQjtJQUNuQixHQUFHLENBQVU7SUFDYixHQUFHLEdBQUcsRUFBRSxDQUFDO0lBQ1QsSUFBSSxHQUFHLEVBQUUsQ0FBQztJQUNWLElBQUksR0FBVyxJQUFJLENBQUM7SUFDUCxTQUFTLEdBQUcsZ0JBQWdCLENBQUM7SUFFbkQsSUFBSSxRQUFRO1FBQ1YsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQzVELE9BQU8sS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxJQUFJLEdBQUcsQ0FBQztJQUNqRixDQUFDO3dHQVZVLGlCQUFpQjs0RkFBakIsaUJBQWlCLDBMQ1o5QixxTkFJQSx3aEJER1ksSUFBSTs7NEZBS0gsaUJBQWlCO2tCQVI3QixTQUFTOytCQUNFLFdBQVcsY0FDVCxJQUFJLFdBQ1AsQ0FBQyxJQUFJLENBQUMsbUJBR0UsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsR0FBRztzQkFBWCxLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNnQixTQUFTO3NCQUE5QixXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nSWYgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTWJTaXplIH0gZnJvbSAnLi4vdG9rZW5zL21iLXVpLWNvbmZpZy50b2tlbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21iLWF2YXRhcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0lmXSxcbiAgdGVtcGxhdGVVcmw6ICcuL21iLWF2YXRhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9tYi1hdmF0YXIuY29tcG9uZW50LnNjc3MnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTWJBdmF0YXJDb21wb25lbnQge1xuICBASW5wdXQoKSBzcmM/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGFsdCA9ICcnO1xuICBASW5wdXQoKSBuYW1lID0gJyc7XG4gIEBJbnB1dCgpIHNpemU6IE1iU2l6ZSA9ICdtZCc7XG4gIEBIb3N0QmluZGluZygnY2xhc3MnKSBob3N0Q2xhc3MgPSAnbWItYXZhdGFyLWhvc3QnO1xuXG4gIGdldCBpbml0aWFscygpOiBzdHJpbmcge1xuICAgIGNvbnN0IHBhcnRzID0gdGhpcy5uYW1lLnRyaW0oKS5zcGxpdCgvXFxzKy8pLmZpbHRlcihCb29sZWFuKTtcbiAgICByZXR1cm4gcGFydHMuc2xpY2UoMCwgMikubWFwKChwKSA9PiBwWzBdPy50b1VwcGVyQ2FzZSgpID8/ICcnKS5qb2luKCcnKSB8fCAnPyc7XG4gIH1cbn1cbiIsIjxzcGFuIGNsYXNzPVwibWItYXZhdGFyXCIgW2NsYXNzXT1cIidtYi1hdmF0YXIgbWItYXZhdGFyLS0nICsgc2l6ZVwiPlxuICA8aW1nICpuZ0lmPVwic3JjOyBlbHNlIGZhbGxiYWNrXCIgW3NyY109XCJzcmNcIiBbYWx0XT1cImFsdCB8fCBuYW1lXCIgLz5cbiAgPG5nLXRlbXBsYXRlICNmYWxsYmFjaz57eyBpbml0aWFscyB9fTwvbmctdGVtcGxhdGU+XG48L3NwYW4+XG4iXX0=
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
|
|
2
|
+
import { NgClass, NgIf } from '@angular/common';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class MbBadgeComponent {
|
|
5
|
+
variant = 'neutral';
|
|
6
|
+
size = 'md';
|
|
7
|
+
dot = false;
|
|
8
|
+
pill = true;
|
|
9
|
+
hostClass = 'mb-badge-host';
|
|
10
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbBadgeComponent, isStandalone: true, selector: "mb-badge", inputs: { variant: "variant", size: "size", dot: "dot", pill: "pill" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"mb-badge\" [class.mb-badge--pill]=\"pill\" [class.mb-badge--dot-only]=\"dot\" [ngClass]=\"['mb-badge--' + variant, 'mb-badge--' + size]\">\n <span class=\"mb-badge__dot\" *ngIf=\"dot\"></span>\n <ng-content></ng-content>\n</span>\n", styles: [":host{display:inline-flex}.mb-badge{display:inline-flex;align-items:center;gap:.35rem;border:1px solid transparent;border-radius:var(--mb-radius-md);padding:.2rem .55rem;font-weight:750;font-size:.76rem;line-height:1.1}.mb-badge--pill{border-radius:999px}.mb-badge--sm{font-size:.68rem;padding:.14rem .42rem}.mb-badge--lg{font-size:.86rem;padding:.28rem .7rem}.mb-badge__dot{inline-size:.42rem;block-size:.42rem;border-radius:999px;background:currentColor}.mb-badge--dot-only{padding:.25rem}.mb-badge--primary{color:var(--mb-color-primary);background:var(--mb-color-primary-soft)}.mb-badge--success{color:var(--mb-color-success);background:var(--mb-color-success-soft)}.mb-badge--warning{color:var(--mb-color-warning);background:var(--mb-color-warning-soft)}.mb-badge--danger{color:var(--mb-color-danger);background:var(--mb-color-danger-soft)}.mb-badge--neutral{color:var(--mb-color-muted);background:var(--mb-color-surface);border-color:var(--mb-color-border)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12
|
+
}
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbBadgeComponent, decorators: [{
|
|
14
|
+
type: Component,
|
|
15
|
+
args: [{ selector: 'mb-badge', standalone: true, imports: [NgClass, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"mb-badge\" [class.mb-badge--pill]=\"pill\" [class.mb-badge--dot-only]=\"dot\" [ngClass]=\"['mb-badge--' + variant, 'mb-badge--' + size]\">\n <span class=\"mb-badge__dot\" *ngIf=\"dot\"></span>\n <ng-content></ng-content>\n</span>\n", styles: [":host{display:inline-flex}.mb-badge{display:inline-flex;align-items:center;gap:.35rem;border:1px solid transparent;border-radius:var(--mb-radius-md);padding:.2rem .55rem;font-weight:750;font-size:.76rem;line-height:1.1}.mb-badge--pill{border-radius:999px}.mb-badge--sm{font-size:.68rem;padding:.14rem .42rem}.mb-badge--lg{font-size:.86rem;padding:.28rem .7rem}.mb-badge__dot{inline-size:.42rem;block-size:.42rem;border-radius:999px;background:currentColor}.mb-badge--dot-only{padding:.25rem}.mb-badge--primary{color:var(--mb-color-primary);background:var(--mb-color-primary-soft)}.mb-badge--success{color:var(--mb-color-success);background:var(--mb-color-success-soft)}.mb-badge--warning{color:var(--mb-color-warning);background:var(--mb-color-warning-soft)}.mb-badge--danger{color:var(--mb-color-danger);background:var(--mb-color-danger-soft)}.mb-badge--neutral{color:var(--mb-color-muted);background:var(--mb-color-surface);border-color:var(--mb-color-border)}\n"] }]
|
|
16
|
+
}], propDecorators: { variant: [{
|
|
17
|
+
type: Input
|
|
18
|
+
}], size: [{
|
|
19
|
+
type: Input
|
|
20
|
+
}], dot: [{
|
|
21
|
+
type: Input
|
|
22
|
+
}], pill: [{
|
|
23
|
+
type: Input
|
|
24
|
+
}], hostClass: [{
|
|
25
|
+
type: HostBinding,
|
|
26
|
+
args: ['class']
|
|
27
|
+
}] } });
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWItYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9iYWRnZS9tYi1iYWRnZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2JhZGdlL21iLWJhZGdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RixPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQWFoRCxNQUFNLE9BQU8sZ0JBQWdCO0lBQ2xCLE9BQU8sR0FBbUIsU0FBUyxDQUFDO0lBQ3BDLElBQUksR0FBVyxJQUFJLENBQUM7SUFDcEIsR0FBRyxHQUFHLEtBQUssQ0FBQztJQUNaLElBQUksR0FBRyxJQUFJLENBQUM7SUFDQyxTQUFTLEdBQUcsZUFBZSxDQUFDO3dHQUx2QyxnQkFBZ0I7NEZBQWhCLGdCQUFnQixpTUNkN0IseVBBSUEsOC9CREtZLE9BQU8sb0ZBQUUsSUFBSTs7NEZBS1osZ0JBQWdCO2tCQVI1QixTQUFTOytCQUNFLFVBQVUsY0FDUixJQUFJLFdBQ1AsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLG1CQUdQLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLE9BQU87c0JBQWYsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csR0FBRztzQkFBWCxLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDZ0IsU0FBUztzQkFBOUIsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOZ0NsYXNzLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE1iU2l6ZSB9IGZyb20gJy4uL3Rva2Vucy9tYi11aS1jb25maWcudG9rZW4nO1xuXG5leHBvcnQgdHlwZSBNYkJhZGdlVmFyaWFudCA9ICdwcmltYXJ5JyB8ICdzdWNjZXNzJyB8ICd3YXJuaW5nJyB8ICdkYW5nZXInIHwgJ25ldXRyYWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdtYi1iYWRnZScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0NsYXNzLCBOZ0lmXSxcbiAgdGVtcGxhdGVVcmw6ICcuL21iLWJhZGdlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL21iLWJhZGdlLmNvbXBvbmVudC5zY3NzJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIE1iQmFkZ2VDb21wb25lbnQge1xuICBASW5wdXQoKSB2YXJpYW50OiBNYkJhZGdlVmFyaWFudCA9ICduZXV0cmFsJztcbiAgQElucHV0KCkgc2l6ZTogTWJTaXplID0gJ21kJztcbiAgQElucHV0KCkgZG90ID0gZmFsc2U7XG4gIEBJbnB1dCgpIHBpbGwgPSB0cnVlO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzJykgaG9zdENsYXNzID0gJ21iLWJhZGdlLWhvc3QnO1xufVxuIiwiPHNwYW4gY2xhc3M9XCJtYi1iYWRnZVwiIFtjbGFzcy5tYi1iYWRnZS0tcGlsbF09XCJwaWxsXCIgW2NsYXNzLm1iLWJhZGdlLS1kb3Qtb25seV09XCJkb3RcIiBbbmdDbGFzc109XCJbJ21iLWJhZGdlLS0nICsgdmFyaWFudCwgJ21iLWJhZGdlLS0nICsgc2l6ZV1cIj5cbiAgPHNwYW4gY2xhc3M9XCJtYi1iYWRnZV9fZG90XCIgKm5nSWY9XCJkb3RcIj48L3NwYW4+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvc3Bhbj5cbiJdfQ==
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
|
|
2
|
+
import { NgFor, NgIf } from '@angular/common';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class MbBreadcrumbComponent {
|
|
5
|
+
items = [];
|
|
6
|
+
itemClick = new EventEmitter();
|
|
7
|
+
hostClass = 'mb-breadcrumb-host';
|
|
8
|
+
trackByIndex(index) { return index; }
|
|
9
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbBreadcrumbComponent, isStandalone: true, selector: "mb-breadcrumb", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<nav class=\"mb-breadcrumb\" aria-label=\"Breadcrumb\">\n <ol>\n <li *ngFor=\"let item of items; let last = last; trackBy: trackByIndex\">\n <button type=\"button\" [disabled]=\"item.disabled || last\" (click)=\"itemClick.emit(item)\">{{ item.label }}</button>\n <span *ngIf=\"!last\" aria-hidden=\"true\">/</span>\n </li>\n </ol>\n</nav>\n", styles: [".mb-breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.mb-breadcrumb li{display:inline-flex;align-items:center;gap:.35rem;color:var(--mb-color-muted)}.mb-breadcrumb button{border:0;background:transparent;padding:.15rem .2rem;color:var(--mb-color-primary);cursor:pointer;font:inherit}.mb-breadcrumb button:disabled{color:var(--mb-color-muted);cursor:default}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11
|
+
}
|
|
12
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbBreadcrumbComponent, decorators: [{
|
|
13
|
+
type: Component,
|
|
14
|
+
args: [{ selector: 'mb-breadcrumb', standalone: true, imports: [NgFor, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"mb-breadcrumb\" aria-label=\"Breadcrumb\">\n <ol>\n <li *ngFor=\"let item of items; let last = last; trackBy: trackByIndex\">\n <button type=\"button\" [disabled]=\"item.disabled || last\" (click)=\"itemClick.emit(item)\">{{ item.label }}</button>\n <span *ngIf=\"!last\" aria-hidden=\"true\">/</span>\n </li>\n </ol>\n</nav>\n", styles: [".mb-breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.mb-breadcrumb li{display:inline-flex;align-items:center;gap:.35rem;color:var(--mb-color-muted)}.mb-breadcrumb button{border:0;background:transparent;padding:.15rem .2rem;color:var(--mb-color-primary);cursor:pointer;font:inherit}.mb-breadcrumb button:disabled{color:var(--mb-color-muted);cursor:default}\n"] }]
|
|
15
|
+
}], propDecorators: { items: [{
|
|
16
|
+
type: Input
|
|
17
|
+
}], itemClick: [{
|
|
18
|
+
type: Output
|
|
19
|
+
}], hostClass: [{
|
|
20
|
+
type: HostBinding,
|
|
21
|
+
args: ['class']
|
|
22
|
+
}] } });
|
|
23
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWItYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2JyZWFkY3J1bWIvbWItYnJlYWRjcnVtYi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2JyZWFkY3J1bWIvbWItYnJlYWRjcnVtYi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RyxPQUFPLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQVU5QyxNQUFNLE9BQU8scUJBQXFCO0lBQ3ZCLEtBQUssR0FBdUIsRUFBRSxDQUFDO0lBQzlCLFNBQVMsR0FBRyxJQUFJLFlBQVksRUFBb0IsQ0FBQztJQUNyQyxTQUFTLEdBQUcsb0JBQW9CLENBQUM7SUFDdkQsWUFBWSxDQUFDLEtBQWEsSUFBWSxPQUFPLEtBQUssQ0FBQyxDQUFDLENBQUM7d0dBSjFDLHFCQUFxQjs0RkFBckIscUJBQXFCLCtMQ1hsQyx3V0FRQSwwZERGWSxLQUFLLG1IQUFFLElBQUk7OzRGQUtWLHFCQUFxQjtrQkFSakMsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxXQUNQLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxtQkFHTCx1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0ksU0FBUztzQkFBbEIsTUFBTTtnQkFDZSxTQUFTO3NCQUE5QixXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOZ0ZvciwgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5leHBvcnQgaW50ZXJmYWNlIE1iQnJlYWRjcnVtYkl0ZW0geyBsYWJlbDogc3RyaW5nOyB1cmw/OiBzdHJpbmc7IGRpc2FibGVkPzogYm9vbGVhbjsgfVxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWItYnJlYWRjcnVtYicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0ZvciwgTmdJZl0sXG4gIHRlbXBsYXRlVXJsOiAnLi9tYi1icmVhZGNydW1iLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL21iLWJyZWFkY3J1bWIuY29tcG9uZW50LnNjc3MnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTWJCcmVhZGNydW1iQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaXRlbXM6IE1iQnJlYWRjcnVtYkl0ZW1bXSA9IFtdO1xuICBAT3V0cHV0KCkgaXRlbUNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxNYkJyZWFkY3J1bWJJdGVtPigpO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzJykgaG9zdENsYXNzID0gJ21iLWJyZWFkY3J1bWItaG9zdCc7XG4gIHRyYWNrQnlJbmRleChpbmRleDogbnVtYmVyKTogbnVtYmVyIHsgcmV0dXJuIGluZGV4OyB9XG59XG4iLCI8bmF2IGNsYXNzPVwibWItYnJlYWRjcnVtYlwiIGFyaWEtbGFiZWw9XCJCcmVhZGNydW1iXCI+XG4gIDxvbD5cbiAgICA8bGkgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXM7IGxldCBsYXN0ID0gbGFzdDsgdHJhY2tCeTogdHJhY2tCeUluZGV4XCI+XG4gICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBbZGlzYWJsZWRdPVwiaXRlbS5kaXNhYmxlZCB8fCBsYXN0XCIgKGNsaWNrKT1cIml0ZW1DbGljay5lbWl0KGl0ZW0pXCI+e3sgaXRlbS5sYWJlbCB9fTwvYnV0dG9uPlxuICAgICAgPHNwYW4gKm5nSWY9XCIhbGFzdFwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPi88L3NwYW4+XG4gICAgPC9saT5cbiAgPC9vbD5cbjwvbmF2PlxuIl19
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
|
|
2
|
+
import { NgClass, NgIf } from '@angular/common';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class MbButtonComponent {
|
|
5
|
+
variant = 'primary';
|
|
6
|
+
size = 'md';
|
|
7
|
+
type = 'button';
|
|
8
|
+
disabled = false;
|
|
9
|
+
loading = false;
|
|
10
|
+
fullWidth = false;
|
|
11
|
+
ariaLabel;
|
|
12
|
+
clicked = new EventEmitter();
|
|
13
|
+
hostClass = 'mb-button-host';
|
|
14
|
+
onClick(event) {
|
|
15
|
+
if (this.disabled || this.loading) {
|
|
16
|
+
event.preventDefault();
|
|
17
|
+
event.stopPropagation();
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
this.clicked.emit(event);
|
|
21
|
+
}
|
|
22
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbButtonComponent, isStandalone: true, selector: "mb-button", inputs: { variant: "variant", size: "size", type: "type", disabled: "disabled", loading: "loading", fullWidth: "fullWidth", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<button\n class=\"mb-button\"\n [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-busy]=\"loading\"\n [disabled]=\"disabled || loading\"\n (click)=\"onClick($event)\"\n [ngClass]=\"[\n 'mb-button--' + variant,\n 'mb-button--' + size,\n fullWidth ? 'mb-button--full' : ''\n ]\">\n <span *ngIf=\"loading\" class=\"mb-button__spinner\" aria-hidden=\"true\"></span>\n <span class=\"mb-button__content\"><ng-content></ng-content></span>\n</button>\n", styles: [":host{display:inline-flex}.mb-button{appearance:none;border:1px solid transparent;border-radius:var(--mb-radius-md);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--mb-font-family);font-weight:650;line-height:1;cursor:pointer;transition:background var(--mb-transition-fast),color var(--mb-transition-fast),border-color var(--mb-transition-fast),box-shadow var(--mb-transition-fast),transform var(--mb-transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none}.mb-button:focus-visible{outline:none;box-shadow:var(--mb-focus-ring)}.mb-button:active:not(:disabled){transform:translateY(1px)}.mb-button:disabled{cursor:not-allowed;opacity:.62}.mb-button--sm{min-height:2rem;padding:0 .75rem;font-size:.8125rem}.mb-button--md{min-height:2.5rem;padding:0 1rem;font-size:.875rem}.mb-button--lg{min-height:3rem;padding:0 1.25rem;font-size:.9375rem}.mb-button--full{width:100%}.mb-button--primary{background:var(--mb-color-primary);color:#fff}.mb-button--primary:hover:not(:disabled){background:var(--mb-color-primary-hover)}.mb-button--secondary{background:var(--mb-color-surface-elevated);border-color:var(--mb-color-border);color:var(--mb-color-text)}.mb-button--secondary:hover:not(:disabled){border-color:var(--mb-color-border-strong)}.mb-button--danger{background:var(--mb-color-danger);color:#fff}.mb-button--ghost{background:transparent;color:var(--mb-color-text)}.mb-button--ghost:hover:not(:disabled){background:var(--mb-color-surface)}.mb-button--link{background:transparent;color:var(--mb-color-primary);padding-inline:.25rem;min-height:auto}.mb-button__spinner{inline-size:1em;block-size:1em;border:2px solid currentColor;border-block-start-color:transparent;border-radius:999px;animation:mb-button-spin .72s linear infinite}@keyframes mb-button-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24
|
+
}
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbButtonComponent, decorators: [{
|
|
26
|
+
type: Component,
|
|
27
|
+
args: [{ selector: 'mb-button', standalone: true, imports: [NgClass, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"mb-button\"\n [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-busy]=\"loading\"\n [disabled]=\"disabled || loading\"\n (click)=\"onClick($event)\"\n [ngClass]=\"[\n 'mb-button--' + variant,\n 'mb-button--' + size,\n fullWidth ? 'mb-button--full' : ''\n ]\">\n <span *ngIf=\"loading\" class=\"mb-button__spinner\" aria-hidden=\"true\"></span>\n <span class=\"mb-button__content\"><ng-content></ng-content></span>\n</button>\n", styles: [":host{display:inline-flex}.mb-button{appearance:none;border:1px solid transparent;border-radius:var(--mb-radius-md);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--mb-font-family);font-weight:650;line-height:1;cursor:pointer;transition:background var(--mb-transition-fast),color var(--mb-transition-fast),border-color var(--mb-transition-fast),box-shadow var(--mb-transition-fast),transform var(--mb-transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none}.mb-button:focus-visible{outline:none;box-shadow:var(--mb-focus-ring)}.mb-button:active:not(:disabled){transform:translateY(1px)}.mb-button:disabled{cursor:not-allowed;opacity:.62}.mb-button--sm{min-height:2rem;padding:0 .75rem;font-size:.8125rem}.mb-button--md{min-height:2.5rem;padding:0 1rem;font-size:.875rem}.mb-button--lg{min-height:3rem;padding:0 1.25rem;font-size:.9375rem}.mb-button--full{width:100%}.mb-button--primary{background:var(--mb-color-primary);color:#fff}.mb-button--primary:hover:not(:disabled){background:var(--mb-color-primary-hover)}.mb-button--secondary{background:var(--mb-color-surface-elevated);border-color:var(--mb-color-border);color:var(--mb-color-text)}.mb-button--secondary:hover:not(:disabled){border-color:var(--mb-color-border-strong)}.mb-button--danger{background:var(--mb-color-danger);color:#fff}.mb-button--ghost{background:transparent;color:var(--mb-color-text)}.mb-button--ghost:hover:not(:disabled){background:var(--mb-color-surface)}.mb-button--link{background:transparent;color:var(--mb-color-primary);padding-inline:.25rem;min-height:auto}.mb-button__spinner{inline-size:1em;block-size:1em;border:2px solid currentColor;border-block-start-color:transparent;border-radius:999px;animation:mb-button-spin .72s linear infinite}@keyframes mb-button-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
28
|
+
}], propDecorators: { variant: [{
|
|
29
|
+
type: Input
|
|
30
|
+
}], size: [{
|
|
31
|
+
type: Input
|
|
32
|
+
}], type: [{
|
|
33
|
+
type: Input
|
|
34
|
+
}], disabled: [{
|
|
35
|
+
type: Input
|
|
36
|
+
}], loading: [{
|
|
37
|
+
type: Input
|
|
38
|
+
}], fullWidth: [{
|
|
39
|
+
type: Input
|
|
40
|
+
}], ariaLabel: [{
|
|
41
|
+
type: Input
|
|
42
|
+
}], clicked: [{
|
|
43
|
+
type: Output
|
|
44
|
+
}], hostClass: [{
|
|
45
|
+
type: HostBinding,
|
|
46
|
+
args: ['class']
|
|
47
|
+
}] } });
|
|
48
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWItYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvYnV0dG9uL21iLWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2J1dHRvbi9tYi1idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDN0csT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFjaEQsTUFBTSxPQUFPLGlCQUFpQjtJQUNuQixPQUFPLEdBQW9CLFNBQVMsQ0FBQztJQUNyQyxJQUFJLEdBQVcsSUFBSSxDQUFDO0lBQ3BCLElBQUksR0FBaUIsUUFBUSxDQUFDO0lBQzlCLFFBQVEsR0FBRyxLQUFLLENBQUM7SUFDakIsT0FBTyxHQUFHLEtBQUssQ0FBQztJQUNoQixTQUFTLEdBQUcsS0FBSyxDQUFDO0lBQ2xCLFNBQVMsQ0FBVTtJQUNsQixPQUFPLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztJQUU3QixTQUFTLEdBQUcsZ0JBQWdCLENBQUM7SUFFbkQsT0FBTyxDQUFDLEtBQWlCO1FBQ3ZCLElBQUksSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDbEMsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztZQUN4QixPQUFPO1FBQ1QsQ0FBQztRQUNELElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzNCLENBQUM7d0dBbkJVLGlCQUFpQjs0RkFBakIsaUJBQWlCLGlUQ2Y5QixtZUFlQSxpM0RETFksT0FBTyxvRkFBRSxJQUFJOzs0RkFLWixpQkFBaUI7a0JBUjdCLFNBQVM7K0JBQ0UsV0FBVyxjQUNULElBQUksV0FDUCxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsbUJBR1AsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsT0FBTztzQkFBZixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNJLE9BQU87c0JBQWhCLE1BQU07Z0JBRWUsU0FBUztzQkFBOUIsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmdDbGFzcywgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBNYlNpemUgfSBmcm9tICcuLi90b2tlbnMvbWItdWktY29uZmlnLnRva2VuJztcblxuZXhwb3J0IHR5cGUgTWJCdXR0b25WYXJpYW50ID0gJ3ByaW1hcnknIHwgJ3NlY29uZGFyeScgfCAnZGFuZ2VyJyB8ICdnaG9zdCcgfCAnbGluayc7XG5leHBvcnQgdHlwZSBNYkJ1dHRvblR5cGUgPSAnYnV0dG9uJyB8ICdzdWJtaXQnIHwgJ3Jlc2V0JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWItYnV0dG9uJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW05nQ2xhc3MsIE5nSWZdLFxuICB0ZW1wbGF0ZVVybDogJy4vbWItYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL21iLWJ1dHRvbi5jb21wb25lbnQuc2NzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBNYkJ1dHRvbkNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHZhcmlhbnQ6IE1iQnV0dG9uVmFyaWFudCA9ICdwcmltYXJ5JztcbiAgQElucHV0KCkgc2l6ZTogTWJTaXplID0gJ21kJztcbiAgQElucHV0KCkgdHlwZTogTWJCdXR0b25UeXBlID0gJ2J1dHRvbic7XG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIGxvYWRpbmcgPSBmYWxzZTtcbiAgQElucHV0KCkgZnVsbFdpZHRoID0gZmFsc2U7XG4gIEBJbnB1dCgpIGFyaWFMYWJlbD86IHN0cmluZztcbiAgQE91dHB1dCgpIGNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KCk7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIGhvc3RDbGFzcyA9ICdtYi1idXR0b24taG9zdCc7XG5cbiAgb25DbGljayhldmVudDogTW91c2VFdmVudCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmRpc2FibGVkIHx8IHRoaXMubG9hZGluZykge1xuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLmNsaWNrZWQuZW1pdChldmVudCk7XG4gIH1cbn1cbiIsIjxidXR0b25cbiAgY2xhc3M9XCJtYi1idXR0b25cIlxuICBbYXR0ci50eXBlXT1cInR5cGVcIlxuICBbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbFwiXG4gIFthdHRyLmFyaWEtYnVzeV09XCJsb2FkaW5nXCJcbiAgW2Rpc2FibGVkXT1cImRpc2FibGVkIHx8IGxvYWRpbmdcIlxuICAoY2xpY2spPVwib25DbGljaygkZXZlbnQpXCJcbiAgW25nQ2xhc3NdPVwiW1xuICAgICdtYi1idXR0b24tLScgKyB2YXJpYW50LFxuICAgICdtYi1idXR0b24tLScgKyBzaXplLFxuICAgIGZ1bGxXaWR0aCA/ICdtYi1idXR0b24tLWZ1bGwnIDogJydcbiAgXVwiPlxuICA8c3BhbiAqbmdJZj1cImxvYWRpbmdcIiBjbGFzcz1cIm1iLWJ1dHRvbl9fc3Bpbm5lclwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPjwvc3Bhbj5cbiAgPHNwYW4gY2xhc3M9XCJtYi1idXR0b25fX2NvbnRlbnRcIj48bmctY29udGVudD48L25nLWNvbnRlbnQ+PC9zcGFuPlxuPC9idXR0b24+XG4iXX0=
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
|
|
2
|
+
import { NgIf } from '@angular/common';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class MbCardComponent {
|
|
5
|
+
title = '';
|
|
6
|
+
subtitle = '';
|
|
7
|
+
padding = 'md';
|
|
8
|
+
elevated = false;
|
|
9
|
+
hostClass = 'mb-card-host';
|
|
10
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbCardComponent, isStandalone: true, selector: "mb-card", inputs: { title: "title", subtitle: "subtitle", padding: "padding", elevated: "elevated" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<section class=\"mb-card\" [class.mb-card--elevated]=\"elevated\" [class]=\"'mb-card mb-card--padding-' + padding\">\n <header class=\"mb-card__header\" *ngIf=\"title || subtitle\">\n <h3 class=\"mb-card__title\" *ngIf=\"title\">{{ title }}</h3>\n <p class=\"mb-card__subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</p>\n </header>\n <div class=\"mb-card__content\"><ng-content></ng-content></div>\n</section>\n", styles: [":host{display:block}.mb-card{border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-lg);background:var(--mb-color-surface-elevated);color:var(--mb-color-text);overflow:hidden}.mb-card--elevated{box-shadow:var(--mb-shadow-md)}.mb-card__header{border-block-end:1px solid var(--mb-color-border);padding-block-end:.85rem;margin-block-end:.9rem}.mb-card__title{margin:0;font-size:1rem;font-weight:800}.mb-card__subtitle{margin:.25rem 0 0;color:var(--mb-color-muted);font-size:.86rem}.mb-card--padding-none{padding:0}.mb-card--padding-sm{padding:.75rem}.mb-card--padding-md{padding:1rem}.mb-card--padding-lg{padding:1.35rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12
|
+
}
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbCardComponent, decorators: [{
|
|
14
|
+
type: Component,
|
|
15
|
+
args: [{ selector: 'mb-card', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mb-card\" [class.mb-card--elevated]=\"elevated\" [class]=\"'mb-card mb-card--padding-' + padding\">\n <header class=\"mb-card__header\" *ngIf=\"title || subtitle\">\n <h3 class=\"mb-card__title\" *ngIf=\"title\">{{ title }}</h3>\n <p class=\"mb-card__subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</p>\n </header>\n <div class=\"mb-card__content\"><ng-content></ng-content></div>\n</section>\n", styles: [":host{display:block}.mb-card{border:1px solid var(--mb-color-border);border-radius:var(--mb-radius-lg);background:var(--mb-color-surface-elevated);color:var(--mb-color-text);overflow:hidden}.mb-card--elevated{box-shadow:var(--mb-shadow-md)}.mb-card__header{border-block-end:1px solid var(--mb-color-border);padding-block-end:.85rem;margin-block-end:.9rem}.mb-card__title{margin:0;font-size:1rem;font-weight:800}.mb-card__subtitle{margin:.25rem 0 0;color:var(--mb-color-muted);font-size:.86rem}.mb-card--padding-none{padding:0}.mb-card--padding-sm{padding:.75rem}.mb-card--padding-md{padding:1rem}.mb-card--padding-lg{padding:1.35rem}\n"] }]
|
|
16
|
+
}], propDecorators: { title: [{
|
|
17
|
+
type: Input
|
|
18
|
+
}], subtitle: [{
|
|
19
|
+
type: Input
|
|
20
|
+
}], padding: [{
|
|
21
|
+
type: Input
|
|
22
|
+
}], elevated: [{
|
|
23
|
+
type: Input
|
|
24
|
+
}], hostClass: [{
|
|
25
|
+
type: HostBinding,
|
|
26
|
+
args: ['class']
|
|
27
|
+
}] } });
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWItY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NhcmQvbWItY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NhcmQvbWItY2FyZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkYsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQVV2QyxNQUFNLE9BQU8sZUFBZTtJQUNqQixLQUFLLEdBQUcsRUFBRSxDQUFDO0lBQ1gsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUNkLE9BQU8sR0FBZ0MsSUFBSSxDQUFDO0lBQzVDLFFBQVEsR0FBRyxLQUFLLENBQUM7SUFDSixTQUFTLEdBQUcsY0FBYyxDQUFDO3dHQUx0QyxlQUFlOzRGQUFmLGVBQWUsb05DWDVCLG1hQU9BLHFyQkREWSxJQUFJOzs0RkFLSCxlQUFlO2tCQVIzQixTQUFTOytCQUNFLFNBQVMsY0FDUCxJQUFJLFdBQ1AsQ0FBQyxJQUFJLENBQUMsbUJBR0UsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ2dCLFNBQVM7c0JBQTlCLFdBQVc7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21iLWNhcmQnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdJZl0sXG4gIHRlbXBsYXRlVXJsOiAnLi9tYi1jYXJkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL21iLWNhcmQuY29tcG9uZW50LnNjc3MnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTWJDYXJkQ29tcG9uZW50IHtcbiAgQElucHV0KCkgdGl0bGUgPSAnJztcbiAgQElucHV0KCkgc3VidGl0bGUgPSAnJztcbiAgQElucHV0KCkgcGFkZGluZzogJ25vbmUnIHwgJ3NtJyB8ICdtZCcgfCAnbGcnID0gJ21kJztcbiAgQElucHV0KCkgZWxldmF0ZWQgPSBmYWxzZTtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIGhvc3RDbGFzcyA9ICdtYi1jYXJkLWhvc3QnO1xufVxuIiwiPHNlY3Rpb24gY2xhc3M9XCJtYi1jYXJkXCIgW2NsYXNzLm1iLWNhcmQtLWVsZXZhdGVkXT1cImVsZXZhdGVkXCIgW2NsYXNzXT1cIidtYi1jYXJkIG1iLWNhcmQtLXBhZGRpbmctJyArIHBhZGRpbmdcIj5cbiAgPGhlYWRlciBjbGFzcz1cIm1iLWNhcmRfX2hlYWRlclwiICpuZ0lmPVwidGl0bGUgfHwgc3VidGl0bGVcIj5cbiAgICA8aDMgY2xhc3M9XCJtYi1jYXJkX190aXRsZVwiICpuZ0lmPVwidGl0bGVcIj57eyB0aXRsZSB9fTwvaDM+XG4gICAgPHAgY2xhc3M9XCJtYi1jYXJkX19zdWJ0aXRsZVwiICpuZ0lmPVwic3VidGl0bGVcIj57eyBzdWJ0aXRsZSB9fTwvcD5cbiAgPC9oZWFkZXI+XG4gIDxkaXYgY2xhc3M9XCJtYi1jYXJkX19jb250ZW50XCI+PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PjwvZGl2PlxuPC9zZWN0aW9uPlxuIl19
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, HostBinding, Input, Output } from '@angular/core';
|
|
2
|
+
import { NgClass, NgIf } from '@angular/common';
|
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class MbCheckboxComponent {
|
|
6
|
+
label = '';
|
|
7
|
+
hint = '';
|
|
8
|
+
size = 'md';
|
|
9
|
+
indeterminate = false;
|
|
10
|
+
disabled = false;
|
|
11
|
+
name;
|
|
12
|
+
checkedChange = new EventEmitter();
|
|
13
|
+
hostClass = 'mb-checkbox-host';
|
|
14
|
+
checked = false;
|
|
15
|
+
onChange = () => undefined;
|
|
16
|
+
onTouched = () => undefined;
|
|
17
|
+
writeValue(value) {
|
|
18
|
+
this.checked = !!value;
|
|
19
|
+
}
|
|
20
|
+
registerOnChange(fn) {
|
|
21
|
+
this.onChange = fn;
|
|
22
|
+
}
|
|
23
|
+
registerOnTouched(fn) {
|
|
24
|
+
this.onTouched = fn;
|
|
25
|
+
}
|
|
26
|
+
setDisabledState(isDisabled) {
|
|
27
|
+
this.disabled = isDisabled;
|
|
28
|
+
}
|
|
29
|
+
blur() { this.onTouched(); }
|
|
30
|
+
toggle() {
|
|
31
|
+
if (this.disabled)
|
|
32
|
+
return;
|
|
33
|
+
this.checked = !this.checked;
|
|
34
|
+
this.indeterminate = false;
|
|
35
|
+
this.onChange(this.checked);
|
|
36
|
+
this.checkedChange.emit(this.checked);
|
|
37
|
+
this.onTouched();
|
|
38
|
+
}
|
|
39
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
40
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbCheckboxComponent, isStandalone: true, selector: "mb-checkbox", inputs: { label: "label", hint: "hint", size: "size", indeterminate: "indeterminate", disabled: "disabled", name: "name" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "this.hostClass" } }, providers: [
|
|
41
|
+
{
|
|
42
|
+
provide: NG_VALUE_ACCESSOR,
|
|
43
|
+
useExisting: forwardRef(() => MbCheckboxComponent),
|
|
44
|
+
multi: true,
|
|
45
|
+
},
|
|
46
|
+
], ngImport: i0, template: "<label class=\"mb-checkbox\" [class.mb-checkbox--disabled]=\"disabled\" [ngClass]=\"'mb-checkbox--' + size\">\n <input\n class=\"mb-checkbox__native\"\n type=\"checkbox\"\n [name]=\"name\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n (change)=\"toggle()\"\n (blur)=\"blur()\"\n />\n <span class=\"mb-checkbox__box\" [class.mb-checkbox__box--indeterminate]=\"indeterminate\">\n <span *ngIf=\"checked && !indeterminate\" class=\"mb-checkbox__mark\">\u2713</span>\n <span *ngIf=\"indeterminate\" class=\"mb-checkbox__dash\"></span>\n </span>\n <span class=\"mb-checkbox__content\" *ngIf=\"label || hint\">\n <span class=\"mb-checkbox__label\" *ngIf=\"label\">{{ label }}</span>\n <span class=\"mb-checkbox__hint\" *ngIf=\"hint\">{{ hint }}</span>\n </span>\n</label>\n", styles: [":host{display:inline-flex}.mb-checkbox{display:inline-flex;align-items:flex-start;gap:.55rem;cursor:pointer;color:var(--mb-color-text);-webkit-user-select:none;user-select:none}.mb-checkbox__native{position:absolute;opacity:0;pointer-events:none}.mb-checkbox__box{inline-size:1.1rem;block-size:1.1rem;border:1px solid var(--mb-color-border-strong);border-radius:var(--mb-radius-xs);background:var(--mb-color-bg);display:inline-grid;place-items:center;transition:var(--mb-transition-fast);margin-block-start:.08rem}.mb-checkbox:hover .mb-checkbox__box{border-color:var(--mb-color-primary)}.mb-checkbox__native:checked+.mb-checkbox__box,.mb-checkbox__box--indeterminate{background:var(--mb-color-primary);border-color:var(--mb-color-primary);color:#fff}.mb-checkbox__native:focus-visible+.mb-checkbox__box{box-shadow:var(--mb-focus-ring)}.mb-checkbox__mark{font-size:.78rem;line-height:1;font-weight:800}.mb-checkbox__dash{inline-size:.55rem;block-size:2px;background:currentColor;border-radius:999px}.mb-checkbox__content{display:grid;gap:.12rem}.mb-checkbox__label{font-weight:600;font-size:.9rem}.mb-checkbox__hint{color:var(--mb-color-muted);font-size:.78rem}.mb-checkbox--sm .mb-checkbox__box{inline-size:.95rem;block-size:.95rem}.mb-checkbox--lg .mb-checkbox__box{inline-size:1.25rem;block-size:1.25rem}.mb-checkbox--disabled{cursor:not-allowed;opacity:.62}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
47
|
+
}
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbCheckboxComponent, decorators: [{
|
|
49
|
+
type: Component,
|
|
50
|
+
args: [{ selector: 'mb-checkbox', standalone: true, imports: [NgClass, NgIf], providers: [
|
|
51
|
+
{
|
|
52
|
+
provide: NG_VALUE_ACCESSOR,
|
|
53
|
+
useExisting: forwardRef(() => MbCheckboxComponent),
|
|
54
|
+
multi: true,
|
|
55
|
+
},
|
|
56
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"mb-checkbox\" [class.mb-checkbox--disabled]=\"disabled\" [ngClass]=\"'mb-checkbox--' + size\">\n <input\n class=\"mb-checkbox__native\"\n type=\"checkbox\"\n [name]=\"name\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n (change)=\"toggle()\"\n (blur)=\"blur()\"\n />\n <span class=\"mb-checkbox__box\" [class.mb-checkbox__box--indeterminate]=\"indeterminate\">\n <span *ngIf=\"checked && !indeterminate\" class=\"mb-checkbox__mark\">\u2713</span>\n <span *ngIf=\"indeterminate\" class=\"mb-checkbox__dash\"></span>\n </span>\n <span class=\"mb-checkbox__content\" *ngIf=\"label || hint\">\n <span class=\"mb-checkbox__label\" *ngIf=\"label\">{{ label }}</span>\n <span class=\"mb-checkbox__hint\" *ngIf=\"hint\">{{ hint }}</span>\n </span>\n</label>\n", styles: [":host{display:inline-flex}.mb-checkbox{display:inline-flex;align-items:flex-start;gap:.55rem;cursor:pointer;color:var(--mb-color-text);-webkit-user-select:none;user-select:none}.mb-checkbox__native{position:absolute;opacity:0;pointer-events:none}.mb-checkbox__box{inline-size:1.1rem;block-size:1.1rem;border:1px solid var(--mb-color-border-strong);border-radius:var(--mb-radius-xs);background:var(--mb-color-bg);display:inline-grid;place-items:center;transition:var(--mb-transition-fast);margin-block-start:.08rem}.mb-checkbox:hover .mb-checkbox__box{border-color:var(--mb-color-primary)}.mb-checkbox__native:checked+.mb-checkbox__box,.mb-checkbox__box--indeterminate{background:var(--mb-color-primary);border-color:var(--mb-color-primary);color:#fff}.mb-checkbox__native:focus-visible+.mb-checkbox__box{box-shadow:var(--mb-focus-ring)}.mb-checkbox__mark{font-size:.78rem;line-height:1;font-weight:800}.mb-checkbox__dash{inline-size:.55rem;block-size:2px;background:currentColor;border-radius:999px}.mb-checkbox__content{display:grid;gap:.12rem}.mb-checkbox__label{font-weight:600;font-size:.9rem}.mb-checkbox__hint{color:var(--mb-color-muted);font-size:.78rem}.mb-checkbox--sm .mb-checkbox__box{inline-size:.95rem;block-size:.95rem}.mb-checkbox--lg .mb-checkbox__box{inline-size:1.25rem;block-size:1.25rem}.mb-checkbox--disabled{cursor:not-allowed;opacity:.62}\n"] }]
|
|
57
|
+
}], propDecorators: { label: [{
|
|
58
|
+
type: Input
|
|
59
|
+
}], hint: [{
|
|
60
|
+
type: Input
|
|
61
|
+
}], size: [{
|
|
62
|
+
type: Input
|
|
63
|
+
}], indeterminate: [{
|
|
64
|
+
type: Input
|
|
65
|
+
}], disabled: [{
|
|
66
|
+
type: Input
|
|
67
|
+
}], name: [{
|
|
68
|
+
type: Input
|
|
69
|
+
}], checkedChange: [{
|
|
70
|
+
type: Output
|
|
71
|
+
}], hostClass: [{
|
|
72
|
+
type: HostBinding,
|
|
73
|
+
args: ['class']
|
|
74
|
+
}] } });
|
|
75
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWItY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jaGVja2JveC9tYi1jaGVja2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NoZWNrYm94L21iLWNoZWNrYm94LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6SCxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ2hELE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFrQnpFLE1BQU0sT0FBTyxtQkFBbUI7SUFDckIsS0FBSyxHQUFHLEVBQUUsQ0FBQztJQUNYLElBQUksR0FBRyxFQUFFLENBQUM7SUFDVixJQUFJLEdBQVcsSUFBSSxDQUFDO0lBQ3BCLGFBQWEsR0FBRyxLQUFLLENBQUM7SUFDdEIsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUNqQixJQUFJLENBQVU7SUFDYixhQUFhLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztJQUVoQyxTQUFTLEdBQUcsa0JBQWtCLENBQUM7SUFFckQsT0FBTyxHQUFHLEtBQUssQ0FBQztJQUVSLFFBQVEsR0FBNkIsR0FBRyxFQUFFLENBQUMsU0FBUyxDQUFDO0lBQ3JELFNBQVMsR0FBZSxHQUFHLEVBQUUsQ0FBQyxTQUFTLENBQUM7SUFFaEQsVUFBVSxDQUFDLEtBQXFCO1FBQzlCLElBQUksQ0FBQyxPQUFPLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQztJQUN6QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBNEI7UUFDM0MsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQWM7UUFDOUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGdCQUFnQixDQUFDLFVBQW1CO1FBQ2xDLElBQUksQ0FBQyxRQUFRLEdBQUcsVUFBVSxDQUFDO0lBQzdCLENBQUM7SUFFRCxJQUFJLEtBQVcsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUVsQyxNQUFNO1FBQ0osSUFBSSxJQUFJLENBQUMsUUFBUTtZQUFFLE9BQU87UUFDMUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7UUFDN0IsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7UUFDM0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDNUIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3RDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO3dHQXpDVSxtQkFBbUI7NEZBQW5CLG1CQUFtQix3UkFUbkI7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG1CQUFtQixDQUFDO2dCQUNsRCxLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsMEJDakJILDQyQkFvQkEsNjRDRFpZLE9BQU8sb0ZBQUUsSUFBSTs7NEZBWVosbUJBQW1CO2tCQWYvQixTQUFTOytCQUNFLGFBQWEsY0FDWCxJQUFJLFdBQ1AsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLGFBR2I7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsb0JBQW9CLENBQUM7NEJBQ2xELEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGLG1CQUNnQix1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNJLGFBQWE7c0JBQXRCLE1BQU07Z0JBRWUsU0FBUztzQkFBOUIsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBmb3J3YXJkUmVmLCBIb3N0QmluZGluZywgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmdDbGFzcywgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBNYlNpemUgfSBmcm9tICcuLi90b2tlbnMvbWItdWktY29uZmlnLnRva2VuJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWItY2hlY2tib3gnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdDbGFzcywgTmdJZl0sXG4gIHRlbXBsYXRlVXJsOiAnLi9tYi1jaGVja2JveC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9tYi1jaGVja2JveC5jb21wb25lbnQuc2NzcycsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gTWJDaGVja2JveENvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTWJDaGVja2JveENvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgQElucHV0KCkgbGFiZWwgPSAnJztcbiAgQElucHV0KCkgaGludCA9ICcnO1xuICBASW5wdXQoKSBzaXplOiBNYlNpemUgPSAnbWQnO1xuICBASW5wdXQoKSBpbmRldGVybWluYXRlID0gZmFsc2U7XG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIG5hbWU/OiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBjaGVja2VkQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKSBob3N0Q2xhc3MgPSAnbWItY2hlY2tib3gtaG9zdCc7XG5cbiAgY2hlY2tlZCA9IGZhbHNlO1xuXG4gIHByaXZhdGUgb25DaGFuZ2U6ICh2YWx1ZTogYm9vbGVhbikgPT4gdm9pZCA9ICgpID0+IHVuZGVmaW5lZDtcbiAgcHJpdmF0ZSBvblRvdWNoZWQ6ICgpID0+IHZvaWQgPSAoKSA9PiB1bmRlZmluZWQ7XG5cbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYm9vbGVhbiB8IG51bGwpOiB2b2lkIHtcbiAgICB0aGlzLmNoZWNrZWQgPSAhIXZhbHVlO1xuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogKHZhbHVlOiBib29sZWFuKSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5kaXNhYmxlZCA9IGlzRGlzYWJsZWQ7XG4gIH1cblxuICBibHVyKCk6IHZvaWQgeyB0aGlzLm9uVG91Y2hlZCgpOyB9XG5cbiAgdG9nZ2xlKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmRpc2FibGVkKSByZXR1cm47XG4gICAgdGhpcy5jaGVja2VkID0gIXRoaXMuY2hlY2tlZDtcbiAgICB0aGlzLmluZGV0ZXJtaW5hdGUgPSBmYWxzZTtcbiAgICB0aGlzLm9uQ2hhbmdlKHRoaXMuY2hlY2tlZCk7XG4gICAgdGhpcy5jaGVja2VkQ2hhbmdlLmVtaXQodGhpcy5jaGVja2VkKTtcbiAgICB0aGlzLm9uVG91Y2hlZCgpO1xuICB9XG59XG4iLCI8bGFiZWwgY2xhc3M9XCJtYi1jaGVja2JveFwiIFtjbGFzcy5tYi1jaGVja2JveC0tZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiBbbmdDbGFzc109XCInbWItY2hlY2tib3gtLScgKyBzaXplXCI+XG4gIDxpbnB1dFxuICAgIGNsYXNzPVwibWItY2hlY2tib3hfX25hdGl2ZVwiXG4gICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICBbbmFtZV09XCJuYW1lXCJcbiAgICBbY2hlY2tlZF09XCJjaGVja2VkXCJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgIFthdHRyLmFyaWEtY2hlY2tlZF09XCJpbmRldGVybWluYXRlID8gJ21peGVkJyA6IGNoZWNrZWRcIlxuICAgIChjaGFuZ2UpPVwidG9nZ2xlKClcIlxuICAgIChibHVyKT1cImJsdXIoKVwiXG4gIC8+XG4gIDxzcGFuIGNsYXNzPVwibWItY2hlY2tib3hfX2JveFwiIFtjbGFzcy5tYi1jaGVja2JveF9fYm94LS1pbmRldGVybWluYXRlXT1cImluZGV0ZXJtaW5hdGVcIj5cbiAgICA8c3BhbiAqbmdJZj1cImNoZWNrZWQgJiYgIWluZGV0ZXJtaW5hdGVcIiBjbGFzcz1cIm1iLWNoZWNrYm94X19tYXJrXCI+4pyTPC9zcGFuPlxuICAgIDxzcGFuICpuZ0lmPVwiaW5kZXRlcm1pbmF0ZVwiIGNsYXNzPVwibWItY2hlY2tib3hfX2Rhc2hcIj48L3NwYW4+XG4gIDwvc3Bhbj5cbiAgPHNwYW4gY2xhc3M9XCJtYi1jaGVja2JveF9fY29udGVudFwiICpuZ0lmPVwibGFiZWwgfHwgaGludFwiPlxuICAgIDxzcGFuIGNsYXNzPVwibWItY2hlY2tib3hfX2xhYmVsXCIgKm5nSWY9XCJsYWJlbFwiPnt7IGxhYmVsIH19PC9zcGFuPlxuICAgIDxzcGFuIGNsYXNzPVwibWItY2hlY2tib3hfX2hpbnRcIiAqbmdJZj1cImhpbnRcIj57eyBoaW50IH19PC9zcGFuPlxuICA8L3NwYW4+XG48L2xhYmVsPlxuIl19
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
|
|
2
|
+
import { NgIf } from '@angular/common';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class MbChipComponent {
|
|
5
|
+
removable = false;
|
|
6
|
+
selected = false;
|
|
7
|
+
disabled = false;
|
|
8
|
+
removed = new EventEmitter();
|
|
9
|
+
hostClass = 'mb-chip-host';
|
|
10
|
+
remove(event) {
|
|
11
|
+
event.stopPropagation();
|
|
12
|
+
if (!this.disabled)
|
|
13
|
+
this.removed.emit();
|
|
14
|
+
}
|
|
15
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MbChipComponent, isStandalone: true, selector: "mb-chip", inputs: { removable: "removable", selected: "selected", disabled: "disabled" }, outputs: { removed: "removed" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"mb-chip\" [class.mb-chip--selected]=\"selected\" [class.mb-chip--disabled]=\"disabled\">\n <ng-content></ng-content>\n <button *ngIf=\"removable\" type=\"button\" class=\"mb-chip__remove\" [disabled]=\"disabled\" (click)=\"remove($event)\" aria-label=\"Remove\">\u00D7</button>\n</span>\n", styles: [":host{display:inline-flex}.mb-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .65rem;border-radius:999px;background:var(--mb-color-surface);border:1px solid var(--mb-color-border);color:var(--mb-color-text);font-weight:650;font-size:.82rem}.mb-chip--selected{background:var(--mb-color-primary-soft);color:var(--mb-color-primary);border-color:transparent}.mb-chip--disabled{opacity:.6}.mb-chip__remove{border:0;background:transparent;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17
|
+
}
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MbChipComponent, decorators: [{
|
|
19
|
+
type: Component,
|
|
20
|
+
args: [{ selector: 'mb-chip', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"mb-chip\" [class.mb-chip--selected]=\"selected\" [class.mb-chip--disabled]=\"disabled\">\n <ng-content></ng-content>\n <button *ngIf=\"removable\" type=\"button\" class=\"mb-chip__remove\" [disabled]=\"disabled\" (click)=\"remove($event)\" aria-label=\"Remove\">\u00D7</button>\n</span>\n", styles: [":host{display:inline-flex}.mb-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .65rem;border-radius:999px;background:var(--mb-color-surface);border:1px solid var(--mb-color-border);color:var(--mb-color-text);font-weight:650;font-size:.82rem}.mb-chip--selected{background:var(--mb-color-primary-soft);color:var(--mb-color-primary);border-color:transparent}.mb-chip--disabled{opacity:.6}.mb-chip__remove{border:0;background:transparent;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0}\n"] }]
|
|
21
|
+
}], propDecorators: { removable: [{
|
|
22
|
+
type: Input
|
|
23
|
+
}], selected: [{
|
|
24
|
+
type: Input
|
|
25
|
+
}], disabled: [{
|
|
26
|
+
type: Input
|
|
27
|
+
}], removed: [{
|
|
28
|
+
type: Output
|
|
29
|
+
}], hostClass: [{
|
|
30
|
+
type: HostBinding,
|
|
31
|
+
args: ['class']
|
|
32
|
+
}] } });
|
|
33
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWItY2hpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NoaXAvbWItY2hpcC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NoaXAvbWItY2hpcC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBVXZDLE1BQU0sT0FBTyxlQUFlO0lBQ2pCLFNBQVMsR0FBRyxLQUFLLENBQUM7SUFDbEIsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUNqQixRQUFRLEdBQUcsS0FBSyxDQUFDO0lBQ2hCLE9BQU8sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0lBQ3ZCLFNBQVMsR0FBRyxjQUFjLENBQUM7SUFFakQsTUFBTSxDQUFDLEtBQWlCO1FBQ3RCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVE7WUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzFDLENBQUM7d0dBVlUsZUFBZTs0RkFBZixlQUFlLHlPQ1g1QixrVEFJQSx1a0JERVksSUFBSTs7NEZBS0gsZUFBZTtrQkFSM0IsU0FBUzsrQkFDRSxTQUFTLGNBQ1AsSUFBSSxXQUNQLENBQUMsSUFBSSxDQUFDLG1CQUdFLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLE9BQU87c0JBQWhCLE1BQU07Z0JBQ2UsU0FBUztzQkFBOUIsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21iLWNoaXAnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdJZl0sXG4gIHRlbXBsYXRlVXJsOiAnLi9tYi1jaGlwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL21iLWNoaXAuY29tcG9uZW50LnNjc3MnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTWJDaGlwQ29tcG9uZW50IHtcbiAgQElucHV0KCkgcmVtb3ZhYmxlID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNlbGVjdGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gIEBPdXRwdXQoKSByZW1vdmVkID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzJykgaG9zdENsYXNzID0gJ21iLWNoaXAtaG9zdCc7XG5cbiAgcmVtb3ZlKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgaWYgKCF0aGlzLmRpc2FibGVkKSB0aGlzLnJlbW92ZWQuZW1pdCgpO1xuICB9XG59XG4iLCI8c3BhbiBjbGFzcz1cIm1iLWNoaXBcIiBbY2xhc3MubWItY2hpcC0tc2VsZWN0ZWRdPVwic2VsZWN0ZWRcIiBbY2xhc3MubWItY2hpcC0tZGlzYWJsZWRdPVwiZGlzYWJsZWRcIj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8YnV0dG9uICpuZ0lmPVwicmVtb3ZhYmxlXCIgdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwibWItY2hpcF9fcmVtb3ZlXCIgW2Rpc2FibGVkXT1cImRpc2FibGVkXCIgKGNsaWNrKT1cInJlbW92ZSgkZXZlbnQpXCIgYXJpYS1sYWJlbD1cIlJlbW92ZVwiPsOXPC9idXR0b24+XG48L3NwYW4+XG4iXX0=
|