@danske/sapphire-angular 1.14.0 → 1.14.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/esm2020/lib/contextual-help/src/contextual-help.component.mjs +3 -3
- package/esm2020/lib/text-field/src/text-field-input.directive.mjs +23 -3
- package/esm2020/lib/text-field/src/text-field.component.mjs +2 -2
- package/fesm2015/danske-sapphire-angular.mjs +25 -5
- package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
- package/fesm2020/danske-sapphire-angular.mjs +25 -5
- package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
- package/lib/text-field/src/text-field-input.directive.d.ts +5 -0
- package/package.json +3 -3
|
@@ -80,7 +80,7 @@ export class ContextualHelpComponent {
|
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
ContextualHelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ContextualHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
83
|
-
ContextualHelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ContextualHelpComponent, isStandalone: true, selector: "sp-contextual-help", inputs: { variant: "variant", placement: "placement", ariaLabel: ["aria-label", "ariaLabel"] }, host: { properties: { "attr.aria-label": "null" } }, queries: [{ propertyName: "_footer", first: true, predicate: ContextualHelpFooterDirective, descendants: true }, { propertyName: "_header", first: true, predicate: ContextualHelpHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: PopoverTriggerDirective, descendants: true }], ngImport: i0, template: "<button\n sp-icon-button\n size=\"extraSmall\"\n variant=\"tertiary\"\n appearance=\"ghost\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverPlacement]=\"placement\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <sp-icon\n *ngIf=\"variant === 'help'; else defaultIcon\"\n name=\"questionMarkCircle\"\n size=\"16px\"\n ></sp-icon>\n <ng-template #defaultIcon>\n <sp-icon name=\"info\"></sp-icon>\n </ng-template>\n</button>\n\n<ng-template #popover>\n <sp-popover noPadding>\n <div class=\"sapphire-contextual-help\">\n <div *ngIf=\"_header\" class=\"sapphire-contextual-help__header\">\n <h6 sp-heading spPopoverTitle>\n <ng-content select=\"sp-contextual-help-header\"></ng-content>\n </h6>\n </div>\n <ng-content select=\"sp-contextual-help-content\"></ng-content>\n <div *ngIf=\"_footer\" class=\"sapphire-contextual-help__footer\">\n <ng-content select=\"sp-contextual-help-footer\"></ng-content>\n </div>\n </div>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-contextual-help{color:var(--sapphire-contextual-help-color-content);line-height:var(--sapphire-contextual-help-size-line-height);max-width:var(--sapphire-contextual-help-size-width-max);font-family:var(--sapphire-contextual-help-font-name);font-weight:var(--sapphire-contextual-help-font-weight);font-size:var(--sapphire-contextual-help-size-font);padding:var(--sapphire-contextual-help-size-spacing-vertical) var(--sapphire-contextual-help-size-spacing-horizontal);outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-contextual-help__header{padding-bottom:var(--sapphire-contextual-help-size-spacing-header)}.sapphire-contextual-help__footer{padding-top:var(--sapphire-contextual-help-size-spacing-footer)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SapphireTypographyModule }, { kind: "component", type: i1.HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "ngmodule", type: SapphireButtonModule }, { kind: "component", type: i2.IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "ngmodule", type: SapphireIconModule }, { kind: "component", type: i3.IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: SapphirePopoverModule }, { kind: "component", type: i4.PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth"] }, { kind: "directive", type: i5.PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i6.PopoverTitleDirective, selector: "[spPopoverTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
83
|
+
ContextualHelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ContextualHelpComponent, isStandalone: true, selector: "sp-contextual-help", inputs: { variant: "variant", placement: "placement", ariaLabel: ["aria-label", "ariaLabel"] }, host: { properties: { "attr.aria-label": "null" } }, queries: [{ propertyName: "_footer", first: true, predicate: ContextualHelpFooterDirective, descendants: true }, { propertyName: "_header", first: true, predicate: ContextualHelpHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: PopoverTriggerDirective, descendants: true }], ngImport: i0, template: "<button\n sp-icon-button\n size=\"extraSmall\"\n variant=\"tertiary\"\n appearance=\"ghost\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverPlacement]=\"placement\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <sp-icon\n *ngIf=\"variant === 'help'; else defaultIcon\"\n name=\"questionMarkCircle\"\n size=\"16px\"\n ></sp-icon>\n <ng-template #defaultIcon>\n <sp-icon name=\"info\"></sp-icon>\n </ng-template>\n</button>\n\n<ng-template #popover>\n <sp-popover noPadding>\n <div class=\"sapphire-contextual-help\">\n <div *ngIf=\"_header\" class=\"sapphire-contextual-help__header\">\n <h6 sp-heading spPopoverTitle>\n <ng-content select=\"sp-contextual-help-header\"></ng-content>\n </h6>\n </div>\n <ng-content select=\"sp-contextual-help-content\"></ng-content>\n <div *ngIf=\"_footer\" class=\"sapphire-contextual-help__footer\">\n <ng-content select=\"sp-contextual-help-footer\"></ng-content>\n </div>\n </div>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-contextual-help{color:var(--sapphire-contextual-help-color-content);line-height:var(--sapphire-contextual-help-size-line-height);max-width:var(--sapphire-contextual-help-size-width-max);font-family:var(--sapphire-contextual-help-font-name);font-weight:var(--sapphire-contextual-help-font-weight);font-size:var(--sapphire-contextual-help-size-font);padding:var(--sapphire-contextual-help-size-spacing-vertical) var(--sapphire-contextual-help-size-spacing-horizontal);outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-contextual-help__header{padding-bottom:var(--sapphire-contextual-help-size-spacing-header)}.sapphire-contextual-help__footer{padding-top:var(--sapphire-contextual-help-size-spacing-footer)}.sapphire-contextual-help--no-max-width{max-width:initial}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SapphireTypographyModule }, { kind: "component", type: i1.HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "ngmodule", type: SapphireButtonModule }, { kind: "component", type: i2.IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "ngmodule", type: SapphireIconModule }, { kind: "component", type: i3.IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: SapphirePopoverModule }, { kind: "component", type: i4.PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth"] }, { kind: "directive", type: i5.PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i6.PopoverTitleDirective, selector: "[spPopoverTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
84
84
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ContextualHelpComponent, decorators: [{
|
|
85
85
|
type: Component,
|
|
86
86
|
args: [{ selector: 'sp-contextual-help', standalone: true, imports: [
|
|
@@ -91,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
91
91
|
SapphirePopoverModule,
|
|
92
92
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
93
93
|
'[attr.aria-label]': 'null',
|
|
94
|
-
}, template: "<button\n sp-icon-button\n size=\"extraSmall\"\n variant=\"tertiary\"\n appearance=\"ghost\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverPlacement]=\"placement\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <sp-icon\n *ngIf=\"variant === 'help'; else defaultIcon\"\n name=\"questionMarkCircle\"\n size=\"16px\"\n ></sp-icon>\n <ng-template #defaultIcon>\n <sp-icon name=\"info\"></sp-icon>\n </ng-template>\n</button>\n\n<ng-template #popover>\n <sp-popover noPadding>\n <div class=\"sapphire-contextual-help\">\n <div *ngIf=\"_header\" class=\"sapphire-contextual-help__header\">\n <h6 sp-heading spPopoverTitle>\n <ng-content select=\"sp-contextual-help-header\"></ng-content>\n </h6>\n </div>\n <ng-content select=\"sp-contextual-help-content\"></ng-content>\n <div *ngIf=\"_footer\" class=\"sapphire-contextual-help__footer\">\n <ng-content select=\"sp-contextual-help-footer\"></ng-content>\n </div>\n </div>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-contextual-help{color:var(--sapphire-contextual-help-color-content);line-height:var(--sapphire-contextual-help-size-line-height);max-width:var(--sapphire-contextual-help-size-width-max);font-family:var(--sapphire-contextual-help-font-name);font-weight:var(--sapphire-contextual-help-font-weight);font-size:var(--sapphire-contextual-help-size-font);padding:var(--sapphire-contextual-help-size-spacing-vertical) var(--sapphire-contextual-help-size-spacing-horizontal);outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-contextual-help__header{padding-bottom:var(--sapphire-contextual-help-size-spacing-header)}.sapphire-contextual-help__footer{padding-top:var(--sapphire-contextual-help-size-spacing-footer)}\n"] }]
|
|
94
|
+
}, template: "<button\n sp-icon-button\n size=\"extraSmall\"\n variant=\"tertiary\"\n appearance=\"ghost\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverPlacement]=\"placement\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <sp-icon\n *ngIf=\"variant === 'help'; else defaultIcon\"\n name=\"questionMarkCircle\"\n size=\"16px\"\n ></sp-icon>\n <ng-template #defaultIcon>\n <sp-icon name=\"info\"></sp-icon>\n </ng-template>\n</button>\n\n<ng-template #popover>\n <sp-popover noPadding>\n <div class=\"sapphire-contextual-help\">\n <div *ngIf=\"_header\" class=\"sapphire-contextual-help__header\">\n <h6 sp-heading spPopoverTitle>\n <ng-content select=\"sp-contextual-help-header\"></ng-content>\n </h6>\n </div>\n <ng-content select=\"sp-contextual-help-content\"></ng-content>\n <div *ngIf=\"_footer\" class=\"sapphire-contextual-help__footer\">\n <ng-content select=\"sp-contextual-help-footer\"></ng-content>\n </div>\n </div>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-contextual-help{color:var(--sapphire-contextual-help-color-content);line-height:var(--sapphire-contextual-help-size-line-height);max-width:var(--sapphire-contextual-help-size-width-max);font-family:var(--sapphire-contextual-help-font-name);font-weight:var(--sapphire-contextual-help-font-weight);font-size:var(--sapphire-contextual-help-size-font);padding:var(--sapphire-contextual-help-size-spacing-vertical) var(--sapphire-contextual-help-size-spacing-horizontal);outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-contextual-help__header{padding-bottom:var(--sapphire-contextual-help-size-spacing-header)}.sapphire-contextual-help__footer{padding-top:var(--sapphire-contextual-help-size-spacing-footer)}.sapphire-contextual-help--no-max-width{max-width:initial}\n"] }]
|
|
95
95
|
}], propDecorators: { variant: [{
|
|
96
96
|
type: Input
|
|
97
97
|
}], placement: [{
|
|
@@ -109,4 +109,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
109
109
|
type: ContentChild,
|
|
110
110
|
args: [ContextualHelpHeaderDirective]
|
|
111
111
|
}] } });
|
|
112
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
112
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGV4dHVhbC1oZWxwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29udGV4dHVhbC1oZWxwL3NyYy9jb250ZXh0dWFsLWhlbHAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb250ZXh0dWFsLWhlbHAvc3JjL2NvbnRleHR1YWwtaGVscC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osU0FBUyxFQUNULEtBQUssRUFDTCxTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ3pFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZDQUE2QyxDQUFDO0FBQ3RGLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLHdDQUF3QyxDQUFDOzs7Ozs7OztBQU9sRixNQUFNLE9BQU8sNkJBQTZCOzswSEFBN0IsNkJBQTZCOzhHQUE3Qiw2QkFBNkI7MkZBQTdCLDZCQUE2QjtrQkFKekMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsMkJBQTJCO29CQUNyQyxVQUFVLEVBQUUsSUFBSTtpQkFDakI7O0FBTUQsTUFBTSxPQUFPLDhCQUE4Qjs7MkhBQTlCLDhCQUE4QjsrR0FBOUIsOEJBQThCOzJGQUE5Qiw4QkFBOEI7a0JBSjFDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLDRCQUE0QjtvQkFDdEMsVUFBVSxFQUFFLElBQUk7aUJBQ2pCOztBQU9ELE1BQU0sT0FBTyw2QkFBNkI7OzBIQUE3Qiw2QkFBNkI7OEdBQTdCLDZCQUE2QjsyRkFBN0IsNkJBQTZCO2tCQUp6QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSwyQkFBMkI7b0JBQ3JDLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs7QUFvQkQsTUFBTSxPQUFPLHVCQUF1QjtJQWpCcEM7UUFrQkU7Ozs7Ozs7Ozs7OztXQVlHO1FBRUgsWUFBTyxHQUFvQixNQUFNLENBQUM7UUFFbEM7O1dBRUc7UUFFSCxjQUFTLEdBQWMsS0FBSyxDQUFDO0tBZ0M5QjtJQWJDLE1BQU07UUFDSixPQUFPLElBQUksQ0FBQyxRQUFRLEVBQUUsTUFBTSxFQUFFLENBQUM7SUFDakMsQ0FBQztJQUVELE1BQU07UUFDSixPQUFPLElBQUksQ0FBQyxRQUFRLEVBQUUsTUFBTSxFQUFFLENBQUM7SUFDakMsQ0FBQztJQUNELElBQUk7UUFDRixPQUFPLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxFQUFFLENBQUM7SUFDL0IsQ0FBQztJQUNELEtBQUs7UUFDSCxPQUFPLElBQUksQ0FBQyxRQUFRLEVBQUUsS0FBSyxFQUFFLENBQUM7SUFDaEMsQ0FBQzs7b0hBcERVLHVCQUF1Qjt3R0FBdkIsdUJBQXVCLHdRQWtDcEIsNkJBQTZCLDBFQUc3Qiw2QkFBNkIsMEZBTmhDLHVCQUF1QixnRENqRnBDLHlnQ0FrQ0EsMjJCREtJLElBQUksNEZBQ0osd0JBQXdCLDhOQUN4QixvQkFBb0Isb05BQ3BCLGtCQUFrQiw0SEFDbEIscUJBQXFCOzJGQU9aLHVCQUF1QjtrQkFqQm5DLFNBQVM7K0JBQ0Usb0JBQW9CLGNBR2xCLElBQUksV0FDUDt3QkFDUCxJQUFJO3dCQUNKLHdCQUF3Qjt3QkFDeEIsb0JBQW9CO3dCQUNwQixrQkFBa0I7d0JBQ2xCLHFCQUFxQjtxQkFDdEIsbUJBQ2dCLHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0osbUJBQW1CLEVBQUUsTUFBTTtxQkFDNUI7OEJBaUJELE9BQU87c0JBRE4sS0FBSztnQkFPTixTQUFTO3NCQURSLEtBQUs7Z0JBU04sU0FBUztzQkFEUixLQUFLO3VCQUFDLFlBQVk7Z0JBSW5CLFFBQVE7c0JBRFAsU0FBUzt1QkFBQyx1QkFBdUI7Z0JBSWxDLE9BQU87c0JBRE4sWUFBWTt1QkFBQyw2QkFBNkI7Z0JBSTNDLE9BQU87c0JBRE4sWUFBWTt1QkFBQyw2QkFBNkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGQsXG4gIERpcmVjdGl2ZSxcbiAgSW5wdXQsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFNhcHBoaXJlQnV0dG9uTW9kdWxlIH0gZnJvbSAnLi4vLi4vYnV0dG9uL3NyYy9idXR0b24ubW9kdWxlJztcbmltcG9ydCB7IFNhcHBoaXJlSWNvbk1vZHVsZSB9IGZyb20gJy4uLy4uL2ljb24vc3JjL2ljb24ubW9kdWxlJztcbmltcG9ydCB7IFNhcHBoaXJlUG9wb3Zlck1vZHVsZSB9IGZyb20gJy4uLy4uL3BvcG92ZXIvc3JjL3BvcG92ZXIubW9kdWxlJztcbmltcG9ydCB7IFBvcG92ZXJUcmlnZ2VyRGlyZWN0aXZlIH0gZnJvbSAnLi4vLi4vcG9wb3Zlci9zcmMvcG9wb3Zlci10cmlnZ2VyLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBTYXBwaGlyZVR5cG9ncmFwaHlNb2R1bGUgfSBmcm9tICcuLi8uLi90eXBvZ3JhcGh5L3NyYy90eXBvZ3JhcGh5Lm1vZHVsZSc7XG5pbXBvcnQgeyBQbGFjZW1lbnQgfSBmcm9tICcuLi8uLi9jb21tb24vcGxhY2VtZW50JztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnc3AtY29udGV4dHVhbC1oZWxwLWhlYWRlcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIENvbnRleHR1YWxIZWxwSGVhZGVyRGlyZWN0aXZlIHt9XG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdzcC1jb250ZXh0dWFsLWhlbHAtY29udGVudCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIENvbnRleHR1YWxIZWxwQ29udGVudERpcmVjdGl2ZSB7fVxuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdzcC1jb250ZXh0dWFsLWhlbHAtZm9vdGVyJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgQ29udGV4dHVhbEhlbHBGb290ZXJEaXJlY3RpdmUge31cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3AtY29udGV4dHVhbC1oZWxwJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2NvbnRleHR1YWwtaGVscC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NvbnRleHR1YWwtaGVscC5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgTmdJZixcbiAgICBTYXBwaGlyZVR5cG9ncmFwaHlNb2R1bGUsXG4gICAgU2FwcGhpcmVCdXR0b25Nb2R1bGUsXG4gICAgU2FwcGhpcmVJY29uTW9kdWxlLFxuICAgIFNhcHBoaXJlUG9wb3Zlck1vZHVsZSxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGhvc3Q6IHtcbiAgICAnW2F0dHIuYXJpYS1sYWJlbF0nOiAnbnVsbCcsXG4gIH0sXG59KVxuZXhwb3J0IGNsYXNzIENvbnRleHR1YWxIZWxwQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqXG4gICAqIFRoZSB0eXBlIG9mIGNvbnRleHR1YWwgaGVscCB3aGljaCBkZXRlcm1pbmVzIHRoZSBpY29uIHNob3duLlxuICAgKlxuICAgKiBVc2UgXCJpbmZvXCIgZm9yIGJyaWVmLCBjb250ZXh0dWFsIHN1cHBsZW1lbnRhbCBpbmZvcm1hdGlvbi4gVGhlIGNvbnRlbnRcbiAgICogaW5zaWRlIHNob3VsZCBoYXZlIGFuIGluc3RydWN0aXZlIHRvbmUuXG4gICAqXG4gICAqIFVzZSBcImhlbHBcIiB2YXJpYW50IHRvIHNpZ25hbCBtb3JlIGluLWRlcHRoIGd1aWRhbmNlIGFib3V0IGEgdGFzayBvciBVSSxcbiAgICogdGhpcyBtYXkgaW5jbHVkZSBsaW5rcyBvciBpbWFnZXMgb3Igb3RoZXIgaGVscGZ1bCBtZWRpYS4gVGhlIGNvbnRlbnRcbiAgICogaW5zaWRlIHNob3VsZCBoYXZlIGEgaGVscGZ1bCB0b25lLlxuICAgKlxuICAgKiBAZGVmYXVsdCAnaW5mbydcbiAgICovXG4gIEBJbnB1dCgpXG4gIHZhcmlhbnQ6ICdpbmZvJyB8ICdoZWxwJyA9ICdpbmZvJztcblxuICAvKipcbiAgICogUGxhY2VtZW50IG9mIGNvbnRleHR1YWwgaGVscCBwb3BvdmVyIHJlbGF0aXZlIHRvIHRoZSBpY29uIHRoYXQgdHJpZ2dlcnMgaXQuXG4gICAqL1xuICBASW5wdXQoKVxuICBwbGFjZW1lbnQ6IFBsYWNlbWVudCA9ICd0b3AnO1xuXG4gIC8qKlxuICAgKiBUaGUgbGFiZWwgZm9yIHRoZSB0cmlnZ2VyIG9mIHRoZSBjb250ZXh0dWFsIGhlbHAgZGlhbG9nLlxuICAgKiBUaGlzIHdpbGwgTk9UIGJlIHJlbmRlcmVkIG9uIHRoZSBzY3JlZW4sIGJ1dCBpdCBpcyByZXF1aXJlZFxuICAgKiBmb3IgYWNjZXNzaWJpbGl0eSByZWFzb25zLlxuICAgKi9cbiAgQElucHV0KCdhcmlhLWxhYmVsJylcbiAgYXJpYUxhYmVsITogc3RyaW5nO1xuXG4gIEBWaWV3Q2hpbGQoUG9wb3ZlclRyaWdnZXJEaXJlY3RpdmUpXG4gIF90cmlnZ2VyPzogUG9wb3ZlclRyaWdnZXJEaXJlY3RpdmU7XG5cbiAgQENvbnRlbnRDaGlsZChDb250ZXh0dWFsSGVscEZvb3RlckRpcmVjdGl2ZSlcbiAgX2Zvb3Rlcj86IENvbnRleHR1YWxIZWxwRm9vdGVyRGlyZWN0aXZlO1xuXG4gIEBDb250ZW50Q2hpbGQoQ29udGV4dHVhbEhlbHBIZWFkZXJEaXJlY3RpdmUpXG4gIF9oZWFkZXI/OiBDb250ZXh0dWFsSGVscEhlYWRlckRpcmVjdGl2ZTtcblxuICBpc09wZW4oKSB7XG4gICAgcmV0dXJuIHRoaXMuX3RyaWdnZXI/LmlzT3BlbigpO1xuICB9XG5cbiAgdG9nZ2xlKCkge1xuICAgIHJldHVybiB0aGlzLl90cmlnZ2VyPy50b2dnbGUoKTtcbiAgfVxuICBvcGVuKCkge1xuICAgIHJldHVybiB0aGlzLl90cmlnZ2VyPy5vcGVuKCk7XG4gIH1cbiAgY2xvc2UoKSB7XG4gICAgcmV0dXJuIHRoaXMuX3RyaWdnZXI/LmNsb3NlKCk7XG4gIH1cbn1cbiIsIjxidXR0b25cbiAgc3AtaWNvbi1idXR0b25cbiAgc2l6ZT1cImV4dHJhU21hbGxcIlxuICB2YXJpYW50PVwidGVydGlhcnlcIlxuICBhcHBlYXJhbmNlPVwiZ2hvc3RcIlxuICBbc3BQb3BvdmVyVHJpZ2dlckZvcl09XCJwb3BvdmVyXCJcbiAgW3NwUG9wb3ZlclBsYWNlbWVudF09XCJwbGFjZW1lbnRcIlxuICBbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbFwiXG4+XG4gIDxzcC1pY29uXG4gICAgKm5nSWY9XCJ2YXJpYW50ID09PSAnaGVscCc7IGVsc2UgZGVmYXVsdEljb25cIlxuICAgIG5hbWU9XCJxdWVzdGlvbk1hcmtDaXJjbGVcIlxuICAgIHNpemU9XCIxNnB4XCJcbiAgPjwvc3AtaWNvbj5cbiAgPG5nLXRlbXBsYXRlICNkZWZhdWx0SWNvbj5cbiAgICA8c3AtaWNvbiBuYW1lPVwiaW5mb1wiPjwvc3AtaWNvbj5cbiAgPC9uZy10ZW1wbGF0ZT5cbjwvYnV0dG9uPlxuXG48bmctdGVtcGxhdGUgI3BvcG92ZXI+XG4gIDxzcC1wb3BvdmVyIG5vUGFkZGluZz5cbiAgICA8ZGl2IGNsYXNzPVwic2FwcGhpcmUtY29udGV4dHVhbC1oZWxwXCI+XG4gICAgICA8ZGl2ICpuZ0lmPVwiX2hlYWRlclwiIGNsYXNzPVwic2FwcGhpcmUtY29udGV4dHVhbC1oZWxwX19oZWFkZXJcIj5cbiAgICAgICAgPGg2IHNwLWhlYWRpbmcgc3BQb3BvdmVyVGl0bGU+XG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic3AtY29udGV4dHVhbC1oZWxwLWhlYWRlclwiPjwvbmctY29udGVudD5cbiAgICAgICAgPC9oNj5cbiAgICAgIDwvZGl2PlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic3AtY29udGV4dHVhbC1oZWxwLWNvbnRlbnRcIj48L25nLWNvbnRlbnQ+XG4gICAgICA8ZGl2ICpuZ0lmPVwiX2Zvb3RlclwiIGNsYXNzPVwic2FwcGhpcmUtY29udGV4dHVhbC1oZWxwX19mb290ZXJcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic3AtY29udGV4dHVhbC1oZWxwLWZvb3RlclwiPjwvbmctY29udGVudD5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L3NwLXBvcG92ZXI+XG48L25nLXRlbXBsYXRlPlxuIl19
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { Directive, HostListener, Input, } from '@angular/core';
|
|
2
|
+
import { Directive, HostBinding, HostListener, Input, } from '@angular/core';
|
|
3
3
|
import { AutoId } from '../../common/auto-id.decorator';
|
|
4
4
|
import { CoerceBoolean } from '../../common/coerce-boolean.decorator';
|
|
5
5
|
import { UseComponentStyles } from '../../common/sapphire-view-encapsulation';
|
|
@@ -7,8 +7,22 @@ import * as i0 from "@angular/core";
|
|
|
7
7
|
import * as i1 from "../../common/sapphire-view-encapsulation";
|
|
8
8
|
export class TextFieldInputDirective {
|
|
9
9
|
ngDoCheck() {
|
|
10
|
+
this.updateValueLength();
|
|
11
|
+
this.updateAutofillStyle();
|
|
12
|
+
}
|
|
13
|
+
onBlur() {
|
|
14
|
+
this.updateAutofillStyle();
|
|
15
|
+
}
|
|
16
|
+
updateValueLength() {
|
|
10
17
|
this.valueLength = this._elementRef.nativeElement.value.length;
|
|
11
18
|
}
|
|
19
|
+
get style() {
|
|
20
|
+
return this.autofillStyle;
|
|
21
|
+
}
|
|
22
|
+
updateAutofillStyle() {
|
|
23
|
+
const { backgroundColor } = window.getComputedStyle(this._elementRef.nativeElement);
|
|
24
|
+
this.autofillStyle = `box-shadow: -100px 0 ${backgroundColor}, 100px 0 ${backgroundColor}`;
|
|
25
|
+
}
|
|
12
26
|
constructor(_elementRef) {
|
|
13
27
|
this._elementRef = _elementRef;
|
|
14
28
|
this.id = '';
|
|
@@ -21,7 +35,7 @@ export class TextFieldInputDirective {
|
|
|
21
35
|
}
|
|
22
36
|
}
|
|
23
37
|
TextFieldInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
24
|
-
TextFieldInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldInputDirective, selector: "[spTextFieldInput]", inputs: { id: "id", disabled: "disabled", required: "required" }, host: { listeners: { "input": "ngDoCheck($event.target.value)" }, properties: { "id": "id" }, classAttribute: "sapphire-text-field__input" }, hostDirectives: [{ directive: i1.UseComponentStyles }], ngImport: i0 });
|
|
38
|
+
TextFieldInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldInputDirective, selector: "[spTextFieldInput]", inputs: { id: "id", disabled: "disabled", required: "required" }, host: { listeners: { "input": "ngDoCheck($event.target.value)", "blur": "onBlur()" }, properties: { "id": "id", "style": "this.style" }, classAttribute: "sapphire-text-field__input" }, hostDirectives: [{ directive: i1.UseComponentStyles }], ngImport: i0 });
|
|
25
39
|
__decorate([
|
|
26
40
|
AutoId()
|
|
27
41
|
], TextFieldInputDirective.prototype, "id", void 0);
|
|
@@ -47,5 +61,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
47
61
|
}], ngDoCheck: [{
|
|
48
62
|
type: HostListener,
|
|
49
63
|
args: ['input', ['$event.target.value']]
|
|
64
|
+
}], onBlur: [{
|
|
65
|
+
type: HostListener,
|
|
66
|
+
args: ['blur']
|
|
67
|
+
}], style: [{
|
|
68
|
+
type: HostBinding,
|
|
69
|
+
args: ['style']
|
|
50
70
|
}] } });
|
|
51
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
71
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1maWVsZC1pbnB1dC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3RleHQtZmllbGQvc3JjL3RleHQtZmllbGQtaW5wdXQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUdULFdBQVcsRUFDWCxZQUFZLEVBQ1osS0FBSyxHQUNOLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUN4RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFFdEUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sMENBQTBDLENBQUM7OztBQVU5RSxNQUFNLE9BQU8sdUJBQXVCO0lBa0JsQyxTQUFTO1FBQ1AsSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7UUFDekIsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUdPLE1BQU07UUFDWixJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRU8saUJBQWlCO1FBQ3ZCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQztJQUNqRSxDQUFDO0lBRUQsSUFDSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDO0lBQzVCLENBQUM7SUFFTyxtQkFBbUI7UUFDekIsTUFBTSxFQUFFLGVBQWUsRUFBRSxHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FDakQsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQy9CLENBQUM7UUFDRixJQUFJLENBQUMsYUFBYSxHQUFHLHdCQUF3QixlQUFlLGFBQWEsZUFBZSxFQUFFLENBQUM7SUFDN0YsQ0FBQztJQUVELFlBQ1UsV0FBK0Q7UUFBL0QsZ0JBQVcsR0FBWCxXQUFXLENBQW9EO1FBeEN6RSxPQUFFLEdBQVcsRUFBRSxDQUFDO1FBR2hCLGFBQVEsR0FBaUIsS0FBSyxDQUFDO1FBSS9CLGFBQVEsR0FBVyxFQUFFLENBQUM7UUFFZixnQkFBVyxHQUFXLENBQUMsQ0FBQztRQWlDN0IsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUM7UUFDL0MsSUFBSSxDQUFDLFdBQVcsR0FBRyxPQUFPLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQztRQUN4QyxJQUFJLENBQUMsUUFBUSxHQUFHLE9BQU8sQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLEtBQUssVUFBVSxDQUFDO0lBQ2hFLENBQUM7O29IQWxEVSx1QkFBdUI7d0dBQXZCLHVCQUF1QjtBQUtsQztJQURDLE1BQU0sRUFBRTttREFDTztBQU9oQjtJQURDLGFBQWE7eURBQ1E7MkZBWlgsdUJBQXVCO2tCQVJuQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxvQkFBb0I7b0JBQzlCLElBQUksRUFBRTt3QkFDSixNQUFNLEVBQUUsSUFBSTt3QkFDWixLQUFLLEVBQUUsNEJBQTRCO3FCQUNwQztvQkFDRCxjQUFjLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQztpQkFDckM7aUdBTUMsRUFBRTtzQkFGRCxLQUFLO2dCQUtOLFFBQVE7c0JBRFAsS0FBSztnQkFLTixRQUFRO3NCQUZQLEtBQUs7Z0JBUU4sU0FBUztzQkFEUixZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLHFCQUFxQixDQUFDO2dCQU90QyxNQUFNO3NCQURiLFlBQVk7dUJBQUMsTUFBTTtnQkFVaEIsS0FBSztzQkFEUixXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBEaXJlY3RpdmUsXG4gIERvQ2hlY2ssXG4gIEVsZW1lbnRSZWYsXG4gIEhvc3RCaW5kaW5nLFxuICBIb3N0TGlzdGVuZXIsXG4gIElucHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQXV0b0lkIH0gZnJvbSAnLi4vLi4vY29tbW9uL2F1dG8taWQuZGVjb3JhdG9yJztcbmltcG9ydCB7IENvZXJjZUJvb2xlYW4gfSBmcm9tICcuLi8uLi9jb21tb24vY29lcmNlLWJvb2xlYW4uZGVjb3JhdG9yJztcbmltcG9ydCB7IEJvb2xlYW5JbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2VyY2lvbic7XG5pbXBvcnQgeyBVc2VDb21wb25lbnRTdHlsZXMgfSBmcm9tICcuLi8uLi9jb21tb24vc2FwcGhpcmUtdmlldy1lbmNhcHN1bGF0aW9uJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3NwVGV4dEZpZWxkSW5wdXRdJyxcbiAgaG9zdDoge1xuICAgICdbaWRdJzogJ2lkJyxcbiAgICBjbGFzczogJ3NhcHBoaXJlLXRleHQtZmllbGRfX2lucHV0JyxcbiAgfSxcbiAgaG9zdERpcmVjdGl2ZXM6IFtVc2VDb21wb25lbnRTdHlsZXNdLFxufSlcbmV4cG9ydCBjbGFzcyBUZXh0RmllbGRJbnB1dERpcmVjdGl2ZSBpbXBsZW1lbnRzIERvQ2hlY2sge1xuICByZWFkb25seSB0ZXh0YXJlYTogYm9vbGVhbjtcblxuICBASW5wdXQoKVxuICBAQXV0b0lkKClcbiAgaWQ6IHN0cmluZyA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIGRpc2FibGVkOiBCb29sZWFuSW5wdXQgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBAQ29lcmNlQm9vbGVhblxuICByZXF1aXJlZDogc3RyaW5nID0gJyc7XG5cbiAgcHVibGljIHZhbHVlTGVuZ3RoOiBudW1iZXIgPSAwO1xuICBwdWJsaWMgYXV0b2ZpbGxTdHlsZT86IHN0cmluZztcblxuICBASG9zdExpc3RlbmVyKCdpbnB1dCcsIFsnJGV2ZW50LnRhcmdldC52YWx1ZSddKVxuICBuZ0RvQ2hlY2soKSB7XG4gICAgdGhpcy51cGRhdGVWYWx1ZUxlbmd0aCgpO1xuICAgIHRoaXMudXBkYXRlQXV0b2ZpbGxTdHlsZSgpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignYmx1cicpXG4gIHByaXZhdGUgb25CbHVyKCkge1xuICAgIHRoaXMudXBkYXRlQXV0b2ZpbGxTdHlsZSgpO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVWYWx1ZUxlbmd0aCgpIHtcbiAgICB0aGlzLnZhbHVlTGVuZ3RoID0gdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnZhbHVlLmxlbmd0aDtcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnc3R5bGUnKVxuICBnZXQgc3R5bGUoKSB7XG4gICAgcmV0dXJuIHRoaXMuYXV0b2ZpbGxTdHlsZTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlQXV0b2ZpbGxTdHlsZSgpIHtcbiAgICBjb25zdCB7IGJhY2tncm91bmRDb2xvciB9ID0gd2luZG93LmdldENvbXB1dGVkU3R5bGUoXG4gICAgICB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnRcbiAgICApO1xuICAgIHRoaXMuYXV0b2ZpbGxTdHlsZSA9IGBib3gtc2hhZG93OiAtMTAwcHggMCAke2JhY2tncm91bmRDb2xvcn0sIDEwMHB4IDAgJHtiYWNrZ3JvdW5kQ29sb3J9YDtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgX2VsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTElucHV0RWxlbWVudCB8IEhUTUxUZXh0QXJlYUVsZW1lbnQ+XG4gICkge1xuICAgIGNvbnN0IGVsZW1lbnQgPSB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gICAgdGhpcy52YWx1ZUxlbmd0aCA9IGVsZW1lbnQudmFsdWUubGVuZ3RoO1xuICAgIHRoaXMudGV4dGFyZWEgPSBlbGVtZW50Lm5vZGVOYW1lLnRvTG93ZXJDYXNlKCkgPT09ICd0ZXh0YXJlYSc7XG4gIH1cbn1cbiJdfQ==
|
|
@@ -39,7 +39,7 @@ TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
39
39
|
provide: FieldControl,
|
|
40
40
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
41
41
|
},
|
|
42
|
-
], queries: [{ propertyName: "inputElement", first: true, predicate: TextFieldInputDirective, descendants: true, read: ElementRef }, { propertyName: "_inputDirective", first: true, predicate: TextFieldInputDirective, descendants: true }, { propertyName: "prefixDirective", first: true, predicate: TextFieldPrefixDirective, descendants: true }, { propertyName: "postfixDirective", first: true, predicate: TextFieldPostfixDirective, descendants: true }], hostDirectives: [{ directive: i2.ThemeCheckDirective }, { directive: i3.UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{width:var(--sapphire-text-field-size-width-control);
|
|
42
|
+
], queries: [{ propertyName: "inputElement", first: true, predicate: TextFieldInputDirective, descendants: true, read: ElementRef }, { propertyName: "_inputDirective", first: true, predicate: TextFieldInputDirective, descendants: true }, { propertyName: "prefixDirective", first: true, predicate: TextFieldPrefixDirective, descendants: true }, { propertyName: "postfixDirective", first: true, predicate: TextFieldPostfixDirective, descendants: true }], hostDirectives: [{ directive: i2.ThemeCheckDirective }, { directive: i3.UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{width:var(--sapphire-text-field-size-width-control);outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-default);outline-offset:calc(0px - var(--sapphire-text-field-size-width-border));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-text-field-size-radius);cursor:text;color:var(--sapphire-text-field-color-content);background-color:var(--sapphire-text-field-color-background);height:var(--sapphire-text-field-size-height-field-l);font-family:var(--sapphire-text-field-font-name);font-size:var(--sapphire-text-field-size-font-content-l);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--medium{height:var(--sapphire-text-field-size-height-field-m);font-size:var(--sapphire-text-field-size-font-content-m)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-l);line-height:var(--sapphire-text-field-size-line-height-content);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-text-field-size-font-weight-input);caret-color:var(--sapphire-text-field-color-caret);color:inherit;background-color:transparent;border:none;outline:none}.sapphire-text-field--medium .sapphire-text-field__input{padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-text-field-color-placeholder)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-text-field-size-spacing-control-gap)}.sapphire-text-field .sapphire-text-field__affix{color:var(--sapphire-text-field-color-affix);flex-shrink:0;z-index:1}.sapphire-text-field .sapphire-text-field__affix--icon{width:var(--sapphire-text-field-size-affix-icon-width-l);height:var(--sapphire-text-field-size-affix-icon-height-l)}.sapphire-text-field--medium .sapphire-text-field__affix--icon{width:var(--sapphire-text-field-size-affix-icon-width-m);height:var(--sapphire-text-field-size-affix-icon-height-m)}.sapphire-text-field--with-prefix{padding-left:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field--with-prefix{padding-left:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field--with-prefix .sapphire-text-field__input{padding-left:0}.sapphire-text-field--with-postfix{padding-right:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field--with-postfix{padding-right:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field--with-postfix .sapphire-text-field__input{padding-right:0}.sapphire-text-field--multiline{display:inline-block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-text-field-size-spacing-control-vertical-l) var(--sapphire-text-field-size-spacing-control-horizontal-l);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-l)}.sapphire-text-field--medium .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-text-field-size-spacing-control-vertical-m) var(--sapphire-text-field-size-spacing-control-horizontal-m);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-m)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-text-field-color-counter-default);padding-left:var(--sapphire-text-field-size-spacing-note-horizontal);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-text-field-color-counter-error)}.sapphire-text-field--error{outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-error)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-text-field-size-focus-ring) var(--sapphire-text-field-color-focus-ring);outline-offset:calc(0px - var(--sapphire-text-field-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input:-webkit-autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:-webkit-autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background)!important}.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background)!important}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.FieldNoteSuffixDirective, selector: "[spFieldNoteSuffix]" }] });
|
|
43
43
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
44
44
|
type: Component,
|
|
45
45
|
args: [{ selector: 'sp-text-field', host: {
|
|
@@ -54,7 +54,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
54
54
|
provide: FieldControl,
|
|
55
55
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
56
56
|
},
|
|
57
|
-
], hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{width:var(--sapphire-text-field-size-width-control);
|
|
57
|
+
], hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{width:var(--sapphire-text-field-size-width-control);outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-default);outline-offset:calc(0px - var(--sapphire-text-field-size-width-border));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-text-field-size-radius);cursor:text;color:var(--sapphire-text-field-color-content);background-color:var(--sapphire-text-field-color-background);height:var(--sapphire-text-field-size-height-field-l);font-family:var(--sapphire-text-field-font-name);font-size:var(--sapphire-text-field-size-font-content-l);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--medium{height:var(--sapphire-text-field-size-height-field-m);font-size:var(--sapphire-text-field-size-font-content-m)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-l);line-height:var(--sapphire-text-field-size-line-height-content);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-text-field-size-font-weight-input);caret-color:var(--sapphire-text-field-color-caret);color:inherit;background-color:transparent;border:none;outline:none}.sapphire-text-field--medium .sapphire-text-field__input{padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-text-field-color-placeholder)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-text-field-size-spacing-control-gap)}.sapphire-text-field .sapphire-text-field__affix{color:var(--sapphire-text-field-color-affix);flex-shrink:0;z-index:1}.sapphire-text-field .sapphire-text-field__affix--icon{width:var(--sapphire-text-field-size-affix-icon-width-l);height:var(--sapphire-text-field-size-affix-icon-height-l)}.sapphire-text-field--medium .sapphire-text-field__affix--icon{width:var(--sapphire-text-field-size-affix-icon-width-m);height:var(--sapphire-text-field-size-affix-icon-height-m)}.sapphire-text-field--with-prefix{padding-left:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field--with-prefix{padding-left:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field--with-prefix .sapphire-text-field__input{padding-left:0}.sapphire-text-field--with-postfix{padding-right:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field--with-postfix{padding-right:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field--with-postfix .sapphire-text-field__input{padding-right:0}.sapphire-text-field--multiline{display:inline-block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-text-field-size-spacing-control-vertical-l) var(--sapphire-text-field-size-spacing-control-horizontal-l);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-l)}.sapphire-text-field--medium .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-text-field-size-spacing-control-vertical-m) var(--sapphire-text-field-size-spacing-control-horizontal-m);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-m)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-text-field-color-counter-default);padding-left:var(--sapphire-text-field-size-spacing-note-horizontal);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-text-field-color-counter-error)}.sapphire-text-field--error{outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-error)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-text-field-size-focus-ring) var(--sapphire-text-field-color-focus-ring);outline-offset:calc(0px - var(--sapphire-text-field-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input:-webkit-autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:-webkit-autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background)!important}.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background)!important}\n"] }]
|
|
58
58
|
}], ctorParameters: function () { return [{ type: i1.FieldComponent, decorators: [{
|
|
59
59
|
type: Optional
|
|
60
60
|
}] }]; }, propDecorators: { characterCounterMax: [{
|
|
@@ -2352,8 +2352,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2352
2352
|
|
|
2353
2353
|
class TextFieldInputDirective {
|
|
2354
2354
|
ngDoCheck() {
|
|
2355
|
+
this.updateValueLength();
|
|
2356
|
+
this.updateAutofillStyle();
|
|
2357
|
+
}
|
|
2358
|
+
onBlur() {
|
|
2359
|
+
this.updateAutofillStyle();
|
|
2360
|
+
}
|
|
2361
|
+
updateValueLength() {
|
|
2355
2362
|
this.valueLength = this._elementRef.nativeElement.value.length;
|
|
2356
2363
|
}
|
|
2364
|
+
get style() {
|
|
2365
|
+
return this.autofillStyle;
|
|
2366
|
+
}
|
|
2367
|
+
updateAutofillStyle() {
|
|
2368
|
+
const { backgroundColor } = window.getComputedStyle(this._elementRef.nativeElement);
|
|
2369
|
+
this.autofillStyle = `box-shadow: -100px 0 ${backgroundColor}, 100px 0 ${backgroundColor}`;
|
|
2370
|
+
}
|
|
2357
2371
|
constructor(_elementRef) {
|
|
2358
2372
|
this._elementRef = _elementRef;
|
|
2359
2373
|
this.id = '';
|
|
@@ -2366,7 +2380,7 @@ class TextFieldInputDirective {
|
|
|
2366
2380
|
}
|
|
2367
2381
|
}
|
|
2368
2382
|
TextFieldInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2369
|
-
TextFieldInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldInputDirective, selector: "[spTextFieldInput]", inputs: { id: "id", disabled: "disabled", required: "required" }, host: { listeners: { "input": "ngDoCheck($event.target.value)" }, properties: { "id": "id" }, classAttribute: "sapphire-text-field__input" }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0 });
|
|
2383
|
+
TextFieldInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldInputDirective, selector: "[spTextFieldInput]", inputs: { id: "id", disabled: "disabled", required: "required" }, host: { listeners: { "input": "ngDoCheck($event.target.value)", "blur": "onBlur()" }, properties: { "id": "id", "style": "this.style" }, classAttribute: "sapphire-text-field__input" }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0 });
|
|
2370
2384
|
__decorate([
|
|
2371
2385
|
AutoId()
|
|
2372
2386
|
], TextFieldInputDirective.prototype, "id", void 0);
|
|
@@ -2392,6 +2406,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2392
2406
|
}], ngDoCheck: [{
|
|
2393
2407
|
type: HostListener,
|
|
2394
2408
|
args: ['input', ['$event.target.value']]
|
|
2409
|
+
}], onBlur: [{
|
|
2410
|
+
type: HostListener,
|
|
2411
|
+
args: ['blur']
|
|
2412
|
+
}], style: [{
|
|
2413
|
+
type: HostBinding,
|
|
2414
|
+
args: ['style']
|
|
2395
2415
|
}] } });
|
|
2396
2416
|
|
|
2397
2417
|
class TextFieldPrefixDirective {
|
|
@@ -2446,7 +2466,7 @@ TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
2446
2466
|
provide: FieldControl,
|
|
2447
2467
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
2448
2468
|
},
|
|
2449
|
-
], queries: [{ propertyName: "inputElement", first: true, predicate: TextFieldInputDirective, descendants: true, read: ElementRef }, { propertyName: "_inputDirective", first: true, predicate: TextFieldInputDirective, descendants: true }, { propertyName: "prefixDirective", first: true, predicate: TextFieldPrefixDirective, descendants: true }, { propertyName: "postfixDirective", first: true, predicate: TextFieldPostfixDirective, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{width:var(--sapphire-text-field-size-width-control);
|
|
2469
|
+
], queries: [{ propertyName: "inputElement", first: true, predicate: TextFieldInputDirective, descendants: true, read: ElementRef }, { propertyName: "_inputDirective", first: true, predicate: TextFieldInputDirective, descendants: true }, { propertyName: "prefixDirective", first: true, predicate: TextFieldPrefixDirective, descendants: true }, { propertyName: "postfixDirective", first: true, predicate: TextFieldPostfixDirective, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{width:var(--sapphire-text-field-size-width-control);outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-default);outline-offset:calc(0px - var(--sapphire-text-field-size-width-border));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-text-field-size-radius);cursor:text;color:var(--sapphire-text-field-color-content);background-color:var(--sapphire-text-field-color-background);height:var(--sapphire-text-field-size-height-field-l);font-family:var(--sapphire-text-field-font-name);font-size:var(--sapphire-text-field-size-font-content-l);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--medium{height:var(--sapphire-text-field-size-height-field-m);font-size:var(--sapphire-text-field-size-font-content-m)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-l);line-height:var(--sapphire-text-field-size-line-height-content);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-text-field-size-font-weight-input);caret-color:var(--sapphire-text-field-color-caret);color:inherit;background-color:transparent;border:none;outline:none}.sapphire-text-field--medium .sapphire-text-field__input{padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-text-field-color-placeholder)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-text-field-size-spacing-control-gap)}.sapphire-text-field .sapphire-text-field__affix{color:var(--sapphire-text-field-color-affix);flex-shrink:0;z-index:1}.sapphire-text-field .sapphire-text-field__affix--icon{width:var(--sapphire-text-field-size-affix-icon-width-l);height:var(--sapphire-text-field-size-affix-icon-height-l)}.sapphire-text-field--medium .sapphire-text-field__affix--icon{width:var(--sapphire-text-field-size-affix-icon-width-m);height:var(--sapphire-text-field-size-affix-icon-height-m)}.sapphire-text-field--with-prefix{padding-left:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field--with-prefix{padding-left:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field--with-prefix .sapphire-text-field__input{padding-left:0}.sapphire-text-field--with-postfix{padding-right:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field--with-postfix{padding-right:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field--with-postfix .sapphire-text-field__input{padding-right:0}.sapphire-text-field--multiline{display:inline-block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-text-field-size-spacing-control-vertical-l) var(--sapphire-text-field-size-spacing-control-horizontal-l);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-l)}.sapphire-text-field--medium .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-text-field-size-spacing-control-vertical-m) var(--sapphire-text-field-size-spacing-control-horizontal-m);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-m)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-text-field-color-counter-default);padding-left:var(--sapphire-text-field-size-spacing-note-horizontal);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-text-field-color-counter-error)}.sapphire-text-field--error{outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-error)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-text-field-size-focus-ring) var(--sapphire-text-field-color-focus-ring);outline-offset:calc(0px - var(--sapphire-text-field-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input:-webkit-autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:-webkit-autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background)!important}.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FieldNoteSuffixDirective, selector: "[spFieldNoteSuffix]" }] });
|
|
2450
2470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
2451
2471
|
type: Component,
|
|
2452
2472
|
args: [{ selector: 'sp-text-field', host: {
|
|
@@ -2461,7 +2481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2461
2481
|
provide: FieldControl,
|
|
2462
2482
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
2463
2483
|
},
|
|
2464
|
-
], hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{width:var(--sapphire-text-field-size-width-control);
|
|
2484
|
+
], hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{width:var(--sapphire-text-field-size-width-control);outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-default);outline-offset:calc(0px - var(--sapphire-text-field-size-width-border));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-text-field-size-radius);cursor:text;color:var(--sapphire-text-field-color-content);background-color:var(--sapphire-text-field-color-background);height:var(--sapphire-text-field-size-height-field-l);font-family:var(--sapphire-text-field-font-name);font-size:var(--sapphire-text-field-size-font-content-l);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--medium{height:var(--sapphire-text-field-size-height-field-m);font-size:var(--sapphire-text-field-size-font-content-m)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-l);line-height:var(--sapphire-text-field-size-line-height-content);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-text-field-size-font-weight-input);caret-color:var(--sapphire-text-field-color-caret);color:inherit;background-color:transparent;border:none;outline:none}.sapphire-text-field--medium .sapphire-text-field__input{padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-text-field-color-placeholder)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-text-field-size-spacing-control-gap)}.sapphire-text-field .sapphire-text-field__affix{color:var(--sapphire-text-field-color-affix);flex-shrink:0;z-index:1}.sapphire-text-field .sapphire-text-field__affix--icon{width:var(--sapphire-text-field-size-affix-icon-width-l);height:var(--sapphire-text-field-size-affix-icon-height-l)}.sapphire-text-field--medium .sapphire-text-field__affix--icon{width:var(--sapphire-text-field-size-affix-icon-width-m);height:var(--sapphire-text-field-size-affix-icon-height-m)}.sapphire-text-field--with-prefix{padding-left:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field--with-prefix{padding-left:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field--with-prefix .sapphire-text-field__input{padding-left:0}.sapphire-text-field--with-postfix{padding-right:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field--with-postfix{padding-right:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field--with-postfix .sapphire-text-field__input{padding-right:0}.sapphire-text-field--multiline{display:inline-block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-text-field-size-spacing-control-vertical-l) var(--sapphire-text-field-size-spacing-control-horizontal-l);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-l)}.sapphire-text-field--medium .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-text-field-size-spacing-control-vertical-m) var(--sapphire-text-field-size-spacing-control-horizontal-m);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-m)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-text-field-color-counter-default);padding-left:var(--sapphire-text-field-size-spacing-note-horizontal);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-text-field-color-counter-error)}.sapphire-text-field--error{outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-error)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-text-field-size-focus-ring) var(--sapphire-text-field-color-focus-ring);outline-offset:calc(0px - var(--sapphire-text-field-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input:-webkit-autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:-webkit-autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background)!important}.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background)!important}\n"] }]
|
|
2465
2485
|
}], ctorParameters: function () {
|
|
2466
2486
|
return [{ type: FieldComponent, decorators: [{
|
|
2467
2487
|
type: Optional
|
|
@@ -7698,7 +7718,7 @@ class ContextualHelpComponent {
|
|
|
7698
7718
|
}
|
|
7699
7719
|
}
|
|
7700
7720
|
ContextualHelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ContextualHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7701
|
-
ContextualHelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ContextualHelpComponent, isStandalone: true, selector: "sp-contextual-help", inputs: { variant: "variant", placement: "placement", ariaLabel: ["aria-label", "ariaLabel"] }, host: { properties: { "attr.aria-label": "null" } }, queries: [{ propertyName: "_footer", first: true, predicate: ContextualHelpFooterDirective, descendants: true }, { propertyName: "_header", first: true, predicate: ContextualHelpHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: PopoverTriggerDirective, descendants: true }], ngImport: i0, template: "<button\n sp-icon-button\n size=\"extraSmall\"\n variant=\"tertiary\"\n appearance=\"ghost\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverPlacement]=\"placement\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <sp-icon\n *ngIf=\"variant === 'help'; else defaultIcon\"\n name=\"questionMarkCircle\"\n size=\"16px\"\n ></sp-icon>\n <ng-template #defaultIcon>\n <sp-icon name=\"info\"></sp-icon>\n </ng-template>\n</button>\n\n<ng-template #popover>\n <sp-popover noPadding>\n <div class=\"sapphire-contextual-help\">\n <div *ngIf=\"_header\" class=\"sapphire-contextual-help__header\">\n <h6 sp-heading spPopoverTitle>\n <ng-content select=\"sp-contextual-help-header\"></ng-content>\n </h6>\n </div>\n <ng-content select=\"sp-contextual-help-content\"></ng-content>\n <div *ngIf=\"_footer\" class=\"sapphire-contextual-help__footer\">\n <ng-content select=\"sp-contextual-help-footer\"></ng-content>\n </div>\n </div>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-contextual-help{color:var(--sapphire-contextual-help-color-content);line-height:var(--sapphire-contextual-help-size-line-height);max-width:var(--sapphire-contextual-help-size-width-max);font-family:var(--sapphire-contextual-help-font-name);font-weight:var(--sapphire-contextual-help-font-weight);font-size:var(--sapphire-contextual-help-size-font);padding:var(--sapphire-contextual-help-size-spacing-vertical) var(--sapphire-contextual-help-size-spacing-horizontal);outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-contextual-help__header{padding-bottom:var(--sapphire-contextual-help-size-spacing-header)}.sapphire-contextual-help__footer{padding-top:var(--sapphire-contextual-help-size-spacing-footer)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SapphireTypographyModule }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "ngmodule", type: SapphireButtonModule }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "ngmodule", type: SapphireIconModule }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: SapphirePopoverModule }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: PopoverTitleDirective, selector: "[spPopoverTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7721
|
+
ContextualHelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ContextualHelpComponent, isStandalone: true, selector: "sp-contextual-help", inputs: { variant: "variant", placement: "placement", ariaLabel: ["aria-label", "ariaLabel"] }, host: { properties: { "attr.aria-label": "null" } }, queries: [{ propertyName: "_footer", first: true, predicate: ContextualHelpFooterDirective, descendants: true }, { propertyName: "_header", first: true, predicate: ContextualHelpHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: PopoverTriggerDirective, descendants: true }], ngImport: i0, template: "<button\n sp-icon-button\n size=\"extraSmall\"\n variant=\"tertiary\"\n appearance=\"ghost\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverPlacement]=\"placement\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <sp-icon\n *ngIf=\"variant === 'help'; else defaultIcon\"\n name=\"questionMarkCircle\"\n size=\"16px\"\n ></sp-icon>\n <ng-template #defaultIcon>\n <sp-icon name=\"info\"></sp-icon>\n </ng-template>\n</button>\n\n<ng-template #popover>\n <sp-popover noPadding>\n <div class=\"sapphire-contextual-help\">\n <div *ngIf=\"_header\" class=\"sapphire-contextual-help__header\">\n <h6 sp-heading spPopoverTitle>\n <ng-content select=\"sp-contextual-help-header\"></ng-content>\n </h6>\n </div>\n <ng-content select=\"sp-contextual-help-content\"></ng-content>\n <div *ngIf=\"_footer\" class=\"sapphire-contextual-help__footer\">\n <ng-content select=\"sp-contextual-help-footer\"></ng-content>\n </div>\n </div>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-contextual-help{color:var(--sapphire-contextual-help-color-content);line-height:var(--sapphire-contextual-help-size-line-height);max-width:var(--sapphire-contextual-help-size-width-max);font-family:var(--sapphire-contextual-help-font-name);font-weight:var(--sapphire-contextual-help-font-weight);font-size:var(--sapphire-contextual-help-size-font);padding:var(--sapphire-contextual-help-size-spacing-vertical) var(--sapphire-contextual-help-size-spacing-horizontal);outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-contextual-help__header{padding-bottom:var(--sapphire-contextual-help-size-spacing-header)}.sapphire-contextual-help__footer{padding-top:var(--sapphire-contextual-help-size-spacing-footer)}.sapphire-contextual-help--no-max-width{max-width:initial}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SapphireTypographyModule }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "ngmodule", type: SapphireButtonModule }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "ngmodule", type: SapphireIconModule }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: SapphirePopoverModule }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: PopoverTitleDirective, selector: "[spPopoverTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7702
7722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ContextualHelpComponent, decorators: [{
|
|
7703
7723
|
type: Component,
|
|
7704
7724
|
args: [{ selector: 'sp-contextual-help', standalone: true, imports: [
|
|
@@ -7709,7 +7729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7709
7729
|
SapphirePopoverModule,
|
|
7710
7730
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
7711
7731
|
'[attr.aria-label]': 'null',
|
|
7712
|
-
}, template: "<button\n sp-icon-button\n size=\"extraSmall\"\n variant=\"tertiary\"\n appearance=\"ghost\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverPlacement]=\"placement\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <sp-icon\n *ngIf=\"variant === 'help'; else defaultIcon\"\n name=\"questionMarkCircle\"\n size=\"16px\"\n ></sp-icon>\n <ng-template #defaultIcon>\n <sp-icon name=\"info\"></sp-icon>\n </ng-template>\n</button>\n\n<ng-template #popover>\n <sp-popover noPadding>\n <div class=\"sapphire-contextual-help\">\n <div *ngIf=\"_header\" class=\"sapphire-contextual-help__header\">\n <h6 sp-heading spPopoverTitle>\n <ng-content select=\"sp-contextual-help-header\"></ng-content>\n </h6>\n </div>\n <ng-content select=\"sp-contextual-help-content\"></ng-content>\n <div *ngIf=\"_footer\" class=\"sapphire-contextual-help__footer\">\n <ng-content select=\"sp-contextual-help-footer\"></ng-content>\n </div>\n </div>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-contextual-help{color:var(--sapphire-contextual-help-color-content);line-height:var(--sapphire-contextual-help-size-line-height);max-width:var(--sapphire-contextual-help-size-width-max);font-family:var(--sapphire-contextual-help-font-name);font-weight:var(--sapphire-contextual-help-font-weight);font-size:var(--sapphire-contextual-help-size-font);padding:var(--sapphire-contextual-help-size-spacing-vertical) var(--sapphire-contextual-help-size-spacing-horizontal);outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-contextual-help__header{padding-bottom:var(--sapphire-contextual-help-size-spacing-header)}.sapphire-contextual-help__footer{padding-top:var(--sapphire-contextual-help-size-spacing-footer)}\n"] }]
|
|
7732
|
+
}, template: "<button\n sp-icon-button\n size=\"extraSmall\"\n variant=\"tertiary\"\n appearance=\"ghost\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverPlacement]=\"placement\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <sp-icon\n *ngIf=\"variant === 'help'; else defaultIcon\"\n name=\"questionMarkCircle\"\n size=\"16px\"\n ></sp-icon>\n <ng-template #defaultIcon>\n <sp-icon name=\"info\"></sp-icon>\n </ng-template>\n</button>\n\n<ng-template #popover>\n <sp-popover noPadding>\n <div class=\"sapphire-contextual-help\">\n <div *ngIf=\"_header\" class=\"sapphire-contextual-help__header\">\n <h6 sp-heading spPopoverTitle>\n <ng-content select=\"sp-contextual-help-header\"></ng-content>\n </h6>\n </div>\n <ng-content select=\"sp-contextual-help-content\"></ng-content>\n <div *ngIf=\"_footer\" class=\"sapphire-contextual-help__footer\">\n <ng-content select=\"sp-contextual-help-footer\"></ng-content>\n </div>\n </div>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-contextual-help{color:var(--sapphire-contextual-help-color-content);line-height:var(--sapphire-contextual-help-size-line-height);max-width:var(--sapphire-contextual-help-size-width-max);font-family:var(--sapphire-contextual-help-font-name);font-weight:var(--sapphire-contextual-help-font-weight);font-size:var(--sapphire-contextual-help-size-font);padding:var(--sapphire-contextual-help-size-spacing-vertical) var(--sapphire-contextual-help-size-spacing-horizontal);outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-contextual-help__header{padding-bottom:var(--sapphire-contextual-help-size-spacing-header)}.sapphire-contextual-help__footer{padding-top:var(--sapphire-contextual-help-size-spacing-footer)}.sapphire-contextual-help--no-max-width{max-width:initial}\n"] }]
|
|
7713
7733
|
}], propDecorators: { variant: [{
|
|
7714
7734
|
type: Input
|
|
7715
7735
|
}], placement: [{
|