monkey-style-guide-v2 0.0.109 → 0.0.111
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.
|
@@ -2,13 +2,32 @@
|
|
|
2
2
|
font-family: var(--mecx-font-name), arial, sans-serif;
|
|
3
3
|
-webkit-font-smoothing: auto;
|
|
4
4
|
-moz-osx-font-smoothing: auto;
|
|
5
|
+
|
|
6
|
+
a {
|
|
7
|
+
text-decoration: none !important;
|
|
8
|
+
}
|
|
5
9
|
}
|
|
6
10
|
|
|
7
11
|
.mecx-link {
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
gap: 4px;
|
|
8
15
|
color: var(--mecx-color-gray-900) !important;
|
|
9
|
-
text-decoration: underline !important;
|
|
10
16
|
|
|
11
17
|
&:hover {
|
|
12
18
|
color: var(--mecx-color-theme-main) !important;
|
|
13
19
|
}
|
|
20
|
+
|
|
21
|
+
&:active {
|
|
22
|
+
transform: scale(0.96);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
span {
|
|
26
|
+
text-decoration: underline !important;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
i {
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
}
|
|
14
33
|
}
|
|
@@ -786,7 +786,7 @@ class MonkeyAlertComponent {
|
|
|
786
786
|
return typeIcons[type];
|
|
787
787
|
}
|
|
788
788
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
789
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyAlertComponent, isStandalone: true, selector: "monkey-alert", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onButtonClicked: "onButtonClicked" }, host: { attributes: { "data-testid": "monkey-alert" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <
|
|
789
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyAlertComponent, isStandalone: true, selector: "monkey-alert", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onButtonClicked: "onButtonClicked" }, host: { attributes: { "data-testid": "monkey-alert" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <a\n href=\"javascript:void(0)\"\n class=\"mecx-link fw-regular fs-14\"\n (click)=\"onButtonClicked.emit()\"\n >\n <span>{{ buttonLabel() }}</span>\n </a>\n }\n </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:var(--mecx-spaces-xs);padding:var(--mecx-spaces-cozy)}monkey-alert .monkey-alert__card.alert{background-color:var(--mecx-color-warning-100);border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:var(--mecx-color-success-100);border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column}monkey-alert .monkey-alert__card__title{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-semibold);letter-spacing:.14px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.14px;line-height:var(--mecx-lh-24);margin-bottom:8px}monkey-alert .monkey-alert__card__link{color:var(--mecx-color-gray-900);cursor:pointer;font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.42px;line-height:var(--mecx-lh-24);text-decoration:underline}\n"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
790
790
|
}
|
|
791
791
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAlertComponent, decorators: [{
|
|
792
792
|
type: Component,
|
|
@@ -794,7 +794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
794
794
|
'data-testid': 'monkey-alert',
|
|
795
795
|
'[attr.id]': 'id',
|
|
796
796
|
'[id]': 'id'
|
|
797
|
-
}, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <
|
|
797
|
+
}, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <a\n href=\"javascript:void(0)\"\n class=\"mecx-link fw-regular fs-14\"\n (click)=\"onButtonClicked.emit()\"\n >\n <span>{{ buttonLabel() }}</span>\n </a>\n }\n </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:var(--mecx-spaces-xs);padding:var(--mecx-spaces-cozy)}monkey-alert .monkey-alert__card.alert{background-color:var(--mecx-color-warning-100);border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:var(--mecx-color-success-100);border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column}monkey-alert .monkey-alert__card__title{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-semibold);letter-spacing:.14px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.14px;line-height:var(--mecx-lh-24);margin-bottom:8px}monkey-alert .monkey-alert__card__link{color:var(--mecx-color-gray-900);cursor:pointer;font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.42px;line-height:var(--mecx-lh-24);text-decoration:underline}\n"] }]
|
|
798
798
|
}], ctorParameters: () => [], propDecorators: { buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], onButtonClicked: [{ type: i0.Output, args: ["onButtonClicked"] }], id: [{
|
|
799
799
|
type: Input
|
|
800
800
|
}] } });
|