monkey-style-guide-v2 0.0.102 → 0.0.104
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.
|
@@ -43,10 +43,10 @@ $mecx-question: (
|
|
|
43
43
|
800: #2d0264
|
|
44
44
|
);
|
|
45
45
|
$mecx-support: (
|
|
46
|
-
blue: #003687,
|
|
47
|
-
pink: #870069,
|
|
48
|
-
brown: #873100,
|
|
49
|
-
green: #7c8700
|
|
46
|
+
'blue': #003687,
|
|
47
|
+
'pink': #870069,
|
|
48
|
+
'brown': #873100,
|
|
49
|
+
'green': #7c8700
|
|
50
50
|
);
|
|
51
51
|
$mecx-gray: (
|
|
52
52
|
50: #f1f2f3,
|
|
@@ -90,6 +90,6 @@ $mecx-weight: (
|
|
|
90
90
|
$mecx-spaces: (
|
|
91
91
|
xs: 8px,
|
|
92
92
|
small: 12px,
|
|
93
|
-
medium:
|
|
94
|
-
cozy:
|
|
93
|
+
medium: 24px,
|
|
94
|
+
cozy: 16px
|
|
95
95
|
);
|
|
@@ -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 <div>\n <a class=\"monkey-alert__card__link\" (click)=\"onButtonClicked.emit()\">\n {{ buttonLabel() }}\n </a>\n </div>\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
|
|
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 <div>\n <a class=\"monkey-alert__card__link\" (click)=\"onButtonClicked.emit()\">\n {{ buttonLabel() }}\n </a>\n </div>\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:.42px;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 <div>\n <a class=\"monkey-alert__card__link\" (click)=\"onButtonClicked.emit()\">\n {{ buttonLabel() }}\n </a>\n </div>\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
|
|
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 <div>\n <a class=\"monkey-alert__card__link\" (click)=\"onButtonClicked.emit()\">\n {{ buttonLabel() }}\n </a>\n </div>\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:.42px;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
|
}] } });
|