@mozaic-ds/angular 2.0.0-beta.32 → 2.0.0-beta.33
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.
|
@@ -240,8 +240,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
240
240
|
class MozFieldComponent {
|
|
241
241
|
id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
242
242
|
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
243
|
-
|
|
244
|
-
|
|
243
|
+
requirementTemplate = contentChild('requirementText', ...(ngDevMode ? [{ debugName: "requirementTemplate" }] : []));
|
|
244
|
+
helpTemplate = contentChild('helpText', ...(ngDevMode ? [{ debugName: "helpTemplate" }] : []));
|
|
245
245
|
helpId = input(...(ngDevMode ? [undefined, { debugName: "helpId" }] : []));
|
|
246
246
|
isValid = input(false, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
|
|
247
247
|
isInvalid = input(false, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
|
|
@@ -255,12 +255,12 @@ class MozFieldComponent {
|
|
|
255
255
|
};
|
|
256
256
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
257
257
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
258
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozFieldComponent, isStandalone: true, selector: "moz-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null },
|
|
258
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozFieldComponent, isStandalone: true, selector: "moz-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helpId: { classPropertyName: "helpId", publicName: "helpId", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, messageId: { classPropertyName: "messageId", publicName: "messageId", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "requirementTemplate", first: true, predicate: ["requirementText"], descendants: true, isSignal: true }, { propertyName: "helpTemplate", first: true, predicate: ["helpText"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"field\">\n <label class=\"field__label\" [attr.for]=\"id()\">\n {{ label() }} @if (requirementTemplate()) {\n <span class=\"field__requirement\">\n (<ng-container [ngTemplateOutlet]=\"requirementTemplate()!\"></ng-container>)\n </span>\n }\n </label>\n\n @if (helpTemplate()) {\n <span class=\"field__help\" [id]=\"helpId()\">\n <ng-container [ngTemplateOutlet]=\"helpTemplate()!\"></ng-container>\n </span>\n }\n\n <!-- <ng-content select=\"moz-field-content\"></ng-content> -->\n\n <div class=\"field__content\">\n <ng-content></ng-content>\n </div>\n\n @if ((isValid() || isInvalid()) && message()) {\n <span [id]=\"messageId()\" [class]=\"classes()\">\n {{ message() }}\n </span>\n }\n</div>\n", styles: [".mc-field__label,.field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content,.mc-field--group .field__content{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline),.mc-field--group .field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
259
259
|
}
|
|
260
260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozFieldComponent, decorators: [{
|
|
261
261
|
type: Component,
|
|
262
|
-
args: [{ selector: 'moz-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field\">\n <label class=\"field__label\" [attr.for]=\"id()\">\n {{ label() }} @if (
|
|
263
|
-
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }],
|
|
262
|
+
args: [{ selector: 'moz-field', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field\">\n <label class=\"field__label\" [attr.for]=\"id()\">\n {{ label() }} @if (requirementTemplate()) {\n <span class=\"field__requirement\">\n (<ng-container [ngTemplateOutlet]=\"requirementTemplate()!\"></ng-container>)\n </span>\n }\n </label>\n\n @if (helpTemplate()) {\n <span class=\"field__help\" [id]=\"helpId()\">\n <ng-container [ngTemplateOutlet]=\"helpTemplate()!\"></ng-container>\n </span>\n }\n\n <!-- <ng-content select=\"moz-field-content\"></ng-content> -->\n\n <div class=\"field__content\">\n <ng-content></ng-content>\n </div>\n\n @if ((isValid() || isInvalid()) && message()) {\n <span [id]=\"messageId()\" [class]=\"classes()\">\n {{ message() }}\n </span>\n }\n</div>\n", styles: [".mc-field__label,.field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content,.mc-field--group .field__content{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline),.mc-field--group .field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}\n"] }]
|
|
263
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], requirementTemplate: [{ type: i0.ContentChild, args: ['requirementText', { isSignal: true }] }], helpTemplate: [{ type: i0.ContentChild, args: ['helpText', { isSignal: true }] }], helpId: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpId", required: false }] }], isValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValid", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], messageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageId", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
|
|
264
264
|
|
|
265
265
|
class MozFieldGroupComponent {
|
|
266
266
|
id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
|