go-captcha-angular
Version:
GoCaptcha for Angular, which implements click mode, slider mode, drag-drop mode and rotation mode.
496 lines (482 loc) • 100 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, ViewEncapsulation, ViewChild, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
const defaultButtonConfig = () => ({
width: 330,
height: 44,
verticalPadding: 12,
horizontalPadding: 16,
});
class BtnDefaultIconComponent {
constructor() {
this.width = 20;
this.height = 20;
}
}
BtnDefaultIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BtnDefaultIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BtnDefaultIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BtnDefaultIconComponent, selector: "btn-default-icon", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<circle fill="#3E7CFF" cx="100" cy="100" r="96.3"/>
<path fill="#FFFFFF" d="M140.8,64.4l-39.6-11.9h-2.4L59.2,64.4c-1.6,0.8-2.8,2.4-2.8,4v24.1c0,25.3,15.8,45.9,42.3,54.6
\tc0.4,0,0.8,0.4,1.2,0.4c0.4,0,0.8,0,1.2-0.4c26.5-8.7,42.3-28.9,42.3-54.6V68.3C143.5,66.8,142.3,65.2,140.8,64.4z"/>
</svg>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BtnDefaultIconComponent, decorators: [{
type: Component,
args: [{
selector: 'btn-default-icon',
template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<circle fill="#3E7CFF" cx="100" cy="100" r="96.3"/>
<path fill="#FFFFFF" d="M140.8,64.4l-39.6-11.9h-2.4L59.2,64.4c-1.6,0.8-2.8,2.4-2.8,4v24.1c0,25.3,15.8,45.9,42.3,54.6
\tc0.4,0,0.8,0.4,1.2,0.4c0.4,0,0.8,0,1.2-0.4c26.5-8.7,42.3-28.9,42.3-54.6V68.3C143.5,66.8,142.3,65.2,140.8,64.4z"/>
</svg>`,
}]
}], propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}] } });
class BtnErrorIconComponent {
constructor() {
this.width = 20;
this.height = 20;
}
}
BtnErrorIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BtnErrorIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BtnErrorIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BtnErrorIconComponent, selector: "btn-error-icon", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<path fill="#ED4630" d="M184,26.6L102.4,2.1h-4.9L16,26.6c-3.3,1.6-5.7,4.9-5.7,8.2v49.8c0,52.2,32.6,94.7,87.3,112.6
\tc0.8,0,1.6,0.8,2.4,0.8s1.6,0,2.4-0.8c54.7-18,87.3-59.6,87.3-112.6V34.7C189.8,31.5,187.3,28.2,184,26.6z M134.5,123.1
\tc3.1,3.1,3.1,8.2,0,11.3c-1.6,1.6-3.6,2.3-5.7,2.3s-4.1-0.8-5.7-2.3L100,111.3l-23.1,23.1c-1.6,1.6-3.6,2.3-5.7,2.3
\tc-2,0-4.1-0.8-5.7-2.3c-3.1-3.1-3.1-8.2,0-11.3L88.7,100L65.5,76.9c-3.1-3.1-3.1-8.2,0-11.3c3.1-3.1,8.2-3.1,11.3,0L100,88.7
\tl23.1-23.1c3.1-3.1,8.2-3.1,11.3,0c3.1,3.1,3.1,8.2,0,11.3L111.3,100L134.5,123.1z"/>
</svg>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BtnErrorIconComponent, decorators: [{
type: Component,
args: [{
selector: 'btn-error-icon',
template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<path fill="#ED4630" d="M184,26.6L102.4,2.1h-4.9L16,26.6c-3.3,1.6-5.7,4.9-5.7,8.2v49.8c0,52.2,32.6,94.7,87.3,112.6
\tc0.8,0,1.6,0.8,2.4,0.8s1.6,0,2.4-0.8c54.7-18,87.3-59.6,87.3-112.6V34.7C189.8,31.5,187.3,28.2,184,26.6z M134.5,123.1
\tc3.1,3.1,3.1,8.2,0,11.3c-1.6,1.6-3.6,2.3-5.7,2.3s-4.1-0.8-5.7-2.3L100,111.3l-23.1,23.1c-1.6,1.6-3.6,2.3-5.7,2.3
\tc-2,0-4.1-0.8-5.7-2.3c-3.1-3.1-3.1-8.2,0-11.3L88.7,100L65.5,76.9c-3.1-3.1-3.1-8.2,0-11.3c3.1-3.1,8.2-3.1,11.3,0L100,88.7
\tl23.1-23.1c3.1-3.1,8.2-3.1,11.3,0c3.1,3.1,3.1,8.2,0,11.3L111.3,100L134.5,123.1z"/>
</svg>`,
}]
}], propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}] } });
class BtnWarnIconComponent {
constructor() {
this.width = 20;
this.height = 20;
}
}
BtnWarnIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BtnWarnIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BtnWarnIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BtnWarnIconComponent, selector: "btn-warn-icon", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<path fill="#FFA000" d="M184,26.6L102.4,2.1h-4.9L16,26.6c-3.3,1.6-5.7,4.9-5.7,8.2v49.8c0,52.2,32.6,94.7,87.3,112.6
\tc0.8,0,1.6,0.8,2.4,0.8s1.6,0,2.4-0.8c54.7-18,87.3-59.6,87.3-112.6V34.7C189.8,31.5,187.3,28.2,184,26.6z M107.3,109.1
\tc-0.5,5.4-3.9,7.9-7.3,7.9c-2.5,0,0,0,0,0c-3.2-0.6-5.7-2-6.8-7.4l-4.4-50.9c0-5.1,6.2-9.7,11.5-9.7c5.3,0,11,4.7,11,9.9
\tL107.3,109.1z M109.3,133.3c0,5.1-4.2,9.3-9.3,9.3c-5.1,0-9.3-4.2-9.3-9.3c0-5.1,4.2-9.3,9.3-9.3C105.1,124,109.3,128.1,109.3,133.3
\tz"/>
</svg>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BtnWarnIconComponent, decorators: [{
type: Component,
args: [{
selector: 'btn-warn-icon',
template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<path fill="#FFA000" d="M184,26.6L102.4,2.1h-4.9L16,26.6c-3.3,1.6-5.7,4.9-5.7,8.2v49.8c0,52.2,32.6,94.7,87.3,112.6
\tc0.8,0,1.6,0.8,2.4,0.8s1.6,0,2.4-0.8c54.7-18,87.3-59.6,87.3-112.6V34.7C189.8,31.5,187.3,28.2,184,26.6z M107.3,109.1
\tc-0.5,5.4-3.9,7.9-7.3,7.9c-2.5,0,0,0,0,0c-3.2-0.6-5.7-2-6.8-7.4l-4.4-50.9c0-5.1,6.2-9.7,11.5-9.7c5.3,0,11,4.7,11,9.9
\tL107.3,109.1z M109.3,133.3c0,5.1-4.2,9.3-9.3,9.3c-5.1,0-9.3-4.2-9.3-9.3c0-5.1,4.2-9.3,9.3-9.3C105.1,124,109.3,128.1,109.3,133.3
\tz"/>
</svg>`,
}]
}], propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}] } });
class BtnSuccessIconComponent {
constructor() {
this.width = 20;
this.height = 20;
}
}
BtnSuccessIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BtnSuccessIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BtnSuccessIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BtnSuccessIconComponent, selector: "btn-success-icon", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<path fill="#5EAA2F" d="M183.3,27.2L102.4,2.9h-4.9L16.7,27.2C13.4,28.8,11,32,11,35.3v49.4c0,51.8,32.4,93.9,86.6,111.7
\tc0.8,0,1.6,0.8,2.4,0.8c0.8,0,1.6,0,2.4-0.8c54.2-17.8,86.6-59.1,86.6-111.7V35.3C189,32,186.6,28.8,183.3,27.2z M146.1,81.4
\tl-48.5,48.5c-1.6,1.6-3.2,2.4-5.7,2.4c-2.4,0-4-0.8-5.7-2.4L62,105.7c-3.2-3.2-3.2-8.1,0-11.3c3.2-3.2,8.1-3.2,11.3,0l18.6,18.6
\tl42.9-42.9c3.2-3.2,8.1-3.2,11.3,0C149.4,73.3,149.4,78.2,146.1,81.4L146.1,81.4z"/>
</svg>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BtnSuccessIconComponent, decorators: [{
type: Component,
args: [{
selector: 'btn-success-icon',
template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<path fill="#5EAA2F" d="M183.3,27.2L102.4,2.9h-4.9L16.7,27.2C13.4,28.8,11,32,11,35.3v49.4c0,51.8,32.4,93.9,86.6,111.7
\tc0.8,0,1.6,0.8,2.4,0.8c0.8,0,1.6,0,2.4-0.8c54.2-17.8,86.6-59.1,86.6-111.7V35.3C189,32,186.6,28.8,183.3,27.2z M146.1,81.4
\tl-48.5,48.5c-1.6,1.6-3.2,2.4-5.7,2.4c-2.4,0-4-0.8-5.7-2.4L62,105.7c-3.2-3.2-3.2-8.1,0-11.3c3.2-3.2,8.1-3.2,11.3,0l18.6,18.6
\tl42.9-42.9c3.2-3.2,8.1-3.2,11.3,0C149.4,73.3,149.4,78.2,146.1,81.4L146.1,81.4z"/>
</svg>`,
}]
}], propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}] } });
class ButtonComponent {
constructor() {
this.config = defaultButtonConfig();
this.disabled = false;
this.type = "default";
this.title = "点击按键进行验证";
}
ngOnInit() {
this.config = { ...defaultButtonConfig(), ...this.config };
}
handleClick(e) {
this.clickEvent && this.clickEvent(e);
}
}
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, selector: "go-captcha-button", inputs: { config: "config", clickEvent: "clickEvent", disabled: "disabled", type: "type", title: "title" }, ngImport: i0, template: "<div\n [class]=\"['go-captcha', 'gc-button-mode', 'gc-btn-block', 'gc-'+type, disabled ? 'gc-disabled' : '' ]\"\n (click)=\"handleClick($event)\"\n [style]=\"{\n 'width': config.width + 'px',\n 'height': config.height + 'px',\n 'padding-left': config.horizontalPadding + 'px',\n 'padding-right': config.horizontalPadding + 'px',\n 'padding-top': config.verticalPadding + 'px',\n 'padding-bottom': config.verticalPadding + 'px',\n }\"\n>\n <div [class]=\"{'gc-ripple': type === 'default'}\" [ngSwitch]=\"type\">\n <btn-default-icon *ngSwitchCase=\"'default'\"></btn-default-icon>\n <btn-warn-icon *ngSwitchCase=\"'warn'\"></btn-warn-icon>\n <btn-error-icon *ngSwitchCase=\"'error'\"></btn-error-icon>\n <btn-success-icon *ngSwitchCase=\"'success'\"></btn-success-icon>\n </div>\n <span>{{title}}</span>\n</div>", styles: [":root{--go-captcha-theme-text-color: #333333;--go-captcha-theme-bg-color: #ffffff;--go-captcha-theme-btn-color: #ffffff;--go-captcha-theme-btn-disabled-color: #749ff9;--go-captcha-theme-btn-bg-color: #4e87ff;--go-captcha-theme-btn-border-color: #4e87ff;--go-captcha-theme-active-color: #3e7cff;--go-captcha-theme-border-color: rgba(206, 223, 254, .5);--go-captcha-theme-icon-color: #3C3C3C;--go-captcha-theme-drag-bar-color: #e0e0e0;--go-captcha-theme-drag-bg-color: #3e7cff;--go-captcha-theme-drag-icon-color: #ffffff;--go-captcha-theme-round-color: #e0e0e0;--go-captcha-theme-loading-icon-color: #3e7cff;--go-captcha-theme-body-bg-color: #34383e;--go-captcha-theme-dot-color: #cedffe;--go-captcha-theme-dot-bg-color: #3e7cff;--go-captcha-theme-dot-border-color: #f7f9fb;--go-captcha-theme-default-color: #3e7cff;--go-captcha-theme-default-bg-color: #ecf5ff;--go-captcha-theme-default-border-color: #3e7cff;--go-captcha-theme-default-hover-color: #e0efff;--go-captcha-theme-error-color: #ed4630;--go-captcha-theme-error-bg-color: #fef0f0;--go-captcha-theme-error-border-color: #ff5a34;--go-captcha-theme-warn-color: #ffa000;--go-captcha-theme-warn-bg-color: #fdf6ec;--go-captcha-theme-warn-border-color: #ffbe09;--go-captcha-theme-success-color: #5eaa2f;--go-captcha-theme-success-bg-color: #f0f9eb;--go-captcha-theme-success-border-color: #8bc640}.go-captcha.gc-wrapper{padding:12px 16px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;box-sizing:border-box}.go-captcha.gc-theme{border:1px solid rgba(206,223,254,.5);border-color:var(--go-captcha-theme-border-color);border-radius:8px;box-shadow:0 0 20px #6464641a;-webkit-box-shadow:0 0 20px rgba(100,100,100,.1);-moz-box-shadow:0 0 20px rgba(100,100,100,.1)}.go-captcha.gc-theme.gc-wrapper{background-color:var(--go-captcha-theme-bg-color)}.go-captcha .gc-header{height:36px;width:100%;font-size:15px;color:var(--go-captcha-theme-text-color);display:flex;align-items:center;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.go-captcha .gc-header span{flex:1;padding-right:5px}.go-captcha .gc-header em{padding:0 3px;font-weight:700;color:var(--go-captcha-theme-active-color);font-style:normal}.go-captcha .gc-body{position:relative;width:100%;margin-top:10px;display:flex;background:var(--go-captcha-theme-body-bg-color);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;overflow:hidden}.go-captcha .gc-body .gc-body-inner{position:relative;background:var(--go-captcha-theme-body-bg-color)}.go-captcha .gc-picture{position:relative;z-index:2;width:100%}.go-captcha .gc-hide{visibility:hidden}.go-captcha .gc-loading{position:absolute;z-index:1;top:50%;left:50%;width:68px;height:68px;margin-left:-34px;margin-top:-34px;line-height:68px;text-align:center;display:flex;align-content:center;justify-content:center}.go-captcha .gc-loading svg,.go-captcha .gc-loading circle{color:var(--go-captcha-theme-loading-icon-color);fill:var(--go-captcha-theme-loading-icon-color)}.go-captcha .gc-footer{width:100%;height:50px;color:#34383e;display:flex;align-items:center;padding-top:10px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.go-captcha .gc-footer .icon-block{flex:1}.go-captcha .gc-icon-block{display:flex;align-items:center}.go-captcha .gc-icon-block>*{display:flex;align-items:center;justify-content:center}.go-captcha .gc-icon-block svg{color:var(--go-captcha-theme-icon-color);fill:var(--go-captcha-theme-icon-color);margin:0 5px;cursor:pointer}.go-captcha .gc-button-block{width:120px;height:40px}.go-captcha .gc-button-block button{width:100%;height:40px;text-align:center;padding:9px 15px;font-size:15px;border-radius:5px;display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;color:var(--go-captcha-theme-btn-color);background-color:var(--go-captcha-theme-btn-bg-color);border:1px solid transparent;border-color:var(--go-captcha-theme-btn-bg-color);-webkit-appearance:none;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none}.go-captcha .gc-button-block button.disabled{pointer-events:none;background-color:var(--go-captcha-theme-btn-disabled-color);border-color:var(--go-captcha-theme-btn-disabled-color)}.go-captcha .gc-drag-slide-bar{width:100%;height:100%;position:relative;touch-action:none}.go-captcha .gc-drag-line{position:absolute;height:14px;background-color:var(--go-captcha-theme-drag-bar-color);left:0;right:0;top:50%;margin-top:-7px;border-radius:7px}.go-captcha .gc-drag-block{position:absolute;left:0;top:50%;margin-top:-20px;width:82px;height:40px;z-index:2;background-color:var(--go-captcha-theme-drag-bg-color);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;border-radius:24px;box-shadow:0 0 20px #64646459;-webkit-box-shadow:0 0 20px rgba(100,100,100,.35);-moz-box-shadow:0 0 20px rgba(100,100,100,.35);color:var(--go-captcha-theme-drag-icon-color);fill:var(--go-captcha-theme-drag-icon-color)}.go-captcha .gc-drag-block>*{display:flex;align-items:center;justify-content:center}.go-captcha .gc-drag-block.disabled{pointer-events:none;background-color:var(--go-captcha-theme-btn-disabled-color);border-color:var(--go-captcha-theme-btn-disabled-color)}.go-captcha .drag-block-inline{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.go-captcha .drag-block-inline>*{display:flex;align-items:center;justify-content:center}.go-captcha.gc-btn-block{position:relative;box-sizing:border-box;display:block;font-size:13px;-webkit-border-radius:5px;-moz-border-radius:5px;letter-spacing:1px;border-radius:5px;line-height:1;white-space:nowrap;-webkit-appearance:none;outline:none;margin:0;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center;justify-items:center;box-shadow:0 0 20px #3e7cff1a;-webkit-box-shadow:0 0 20px rgba(62,124,255,.1);-moz-box-shadow:0 0 20px rgba(62,124,255,.1)}.go-captcha.gc-btn-block span{padding-left:8px}.go-captcha.gc-disabled{pointer-events:none}.go-captcha.gc-default{color:var(--go-captcha-theme-default-color);border:1px solid #50a1ff;border-color:var(--go-captcha-theme-default-border-color);background-color:var(--go-captcha-theme-default-bg-color);cursor:pointer}.go-captcha.gc-default:hover{background-color:var(--go-captcha-theme-default-hover-color)!important}.go-captcha.gc-error{cursor:pointer;color:var(--go-captcha-theme-error-color);background-color:var(--go-captcha-theme-error-bg-color);border:1px solid #ff5a34;border-color:var(--go-captcha-theme-error-border-color)}.go-captcha.gc-warn{cursor:pointer;color:var(--go-captcha-theme-warn-color);background-color:var(--go-captcha-theme-warn-bg-color);border:1px solid #ffbe09;border-color:var(--go-captcha-theme-warn-border-color)}.go-captcha.gc-success{color:var(--go-captcha-theme-success-color);background-color:var(--go-captcha-theme-success-bg-color);border:1px solid #8bc640;border-color:var(--go-captcha-theme-success-border-color);pointer-events:none}.go-captcha .gc-ripple{position:relative;display:flex;align-items:center;justify-content:center;justify-items:center}.go-captcha .gc-ripple>*{z-index:2}.go-captcha .gc-ripple svg{position:relative;z-index:2}.go-captcha .gc-ripple:after{background-color:var(--go-captcha-theme-default-border-color);border-radius:50px;content:\"\";display:block;width:21px;height:21px;opacity:0;position:absolute;top:50%;left:50%;margin-top:-11px;margin-left:-11px;z-index:0;animation:gc-ripple 1.3s infinite;-moz-animation:gc-ripple 1.3s infinite;-webkit-animation:gc-ripple 1.3s infinite;animation-delay:2s;-moz-animation-delay:2s;-webkit-animation-delay:2s}@keyframes gc-ripple{0%{opacity:0}5%{opacity:.05}20%{opacity:.35}65%{opacity:.01}to{transform:scaleX(2) scaleY(2);opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: BtnDefaultIconComponent, selector: "btn-default-icon", inputs: ["width", "height"] }, { kind: "component", type: BtnErrorIconComponent, selector: "btn-error-icon", inputs: ["width", "height"] }, { kind: "component", type: BtnWarnIconComponent, selector: "btn-warn-icon", inputs: ["width", "height"] }, { kind: "component", type: BtnSuccessIconComponent, selector: "btn-success-icon", inputs: ["width", "height"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'go-captcha-button', template: "<div\n [class]=\"['go-captcha', 'gc-button-mode', 'gc-btn-block', 'gc-'+type, disabled ? 'gc-disabled' : '' ]\"\n (click)=\"handleClick($event)\"\n [style]=\"{\n 'width': config.width + 'px',\n 'height': config.height + 'px',\n 'padding-left': config.horizontalPadding + 'px',\n 'padding-right': config.horizontalPadding + 'px',\n 'padding-top': config.verticalPadding + 'px',\n 'padding-bottom': config.verticalPadding + 'px',\n }\"\n>\n <div [class]=\"{'gc-ripple': type === 'default'}\" [ngSwitch]=\"type\">\n <btn-default-icon *ngSwitchCase=\"'default'\"></btn-default-icon>\n <btn-warn-icon *ngSwitchCase=\"'warn'\"></btn-warn-icon>\n <btn-error-icon *ngSwitchCase=\"'error'\"></btn-error-icon>\n <btn-success-icon *ngSwitchCase=\"'success'\"></btn-success-icon>\n </div>\n <span>{{title}}</span>\n</div>", styles: [":root{--go-captcha-theme-text-color: #333333;--go-captcha-theme-bg-color: #ffffff;--go-captcha-theme-btn-color: #ffffff;--go-captcha-theme-btn-disabled-color: #749ff9;--go-captcha-theme-btn-bg-color: #4e87ff;--go-captcha-theme-btn-border-color: #4e87ff;--go-captcha-theme-active-color: #3e7cff;--go-captcha-theme-border-color: rgba(206, 223, 254, .5);--go-captcha-theme-icon-color: #3C3C3C;--go-captcha-theme-drag-bar-color: #e0e0e0;--go-captcha-theme-drag-bg-color: #3e7cff;--go-captcha-theme-drag-icon-color: #ffffff;--go-captcha-theme-round-color: #e0e0e0;--go-captcha-theme-loading-icon-color: #3e7cff;--go-captcha-theme-body-bg-color: #34383e;--go-captcha-theme-dot-color: #cedffe;--go-captcha-theme-dot-bg-color: #3e7cff;--go-captcha-theme-dot-border-color: #f7f9fb;--go-captcha-theme-default-color: #3e7cff;--go-captcha-theme-default-bg-color: #ecf5ff;--go-captcha-theme-default-border-color: #3e7cff;--go-captcha-theme-default-hover-color: #e0efff;--go-captcha-theme-error-color: #ed4630;--go-captcha-theme-error-bg-color: #fef0f0;--go-captcha-theme-error-border-color: #ff5a34;--go-captcha-theme-warn-color: #ffa000;--go-captcha-theme-warn-bg-color: #fdf6ec;--go-captcha-theme-warn-border-color: #ffbe09;--go-captcha-theme-success-color: #5eaa2f;--go-captcha-theme-success-bg-color: #f0f9eb;--go-captcha-theme-success-border-color: #8bc640}.go-captcha.gc-wrapper{padding:12px 16px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;box-sizing:border-box}.go-captcha.gc-theme{border:1px solid rgba(206,223,254,.5);border-color:var(--go-captcha-theme-border-color);border-radius:8px;box-shadow:0 0 20px #6464641a;-webkit-box-shadow:0 0 20px rgba(100,100,100,.1);-moz-box-shadow:0 0 20px rgba(100,100,100,.1)}.go-captcha.gc-theme.gc-wrapper{background-color:var(--go-captcha-theme-bg-color)}.go-captcha .gc-header{height:36px;width:100%;font-size:15px;color:var(--go-captcha-theme-text-color);display:flex;align-items:center;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.go-captcha .gc-header span{flex:1;padding-right:5px}.go-captcha .gc-header em{padding:0 3px;font-weight:700;color:var(--go-captcha-theme-active-color);font-style:normal}.go-captcha .gc-body{position:relative;width:100%;margin-top:10px;display:flex;background:var(--go-captcha-theme-body-bg-color);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;overflow:hidden}.go-captcha .gc-body .gc-body-inner{position:relative;background:var(--go-captcha-theme-body-bg-color)}.go-captcha .gc-picture{position:relative;z-index:2;width:100%}.go-captcha .gc-hide{visibility:hidden}.go-captcha .gc-loading{position:absolute;z-index:1;top:50%;left:50%;width:68px;height:68px;margin-left:-34px;margin-top:-34px;line-height:68px;text-align:center;display:flex;align-content:center;justify-content:center}.go-captcha .gc-loading svg,.go-captcha .gc-loading circle{color:var(--go-captcha-theme-loading-icon-color);fill:var(--go-captcha-theme-loading-icon-color)}.go-captcha .gc-footer{width:100%;height:50px;color:#34383e;display:flex;align-items:center;padding-top:10px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.go-captcha .gc-footer .icon-block{flex:1}.go-captcha .gc-icon-block{display:flex;align-items:center}.go-captcha .gc-icon-block>*{display:flex;align-items:center;justify-content:center}.go-captcha .gc-icon-block svg{color:var(--go-captcha-theme-icon-color);fill:var(--go-captcha-theme-icon-color);margin:0 5px;cursor:pointer}.go-captcha .gc-button-block{width:120px;height:40px}.go-captcha .gc-button-block button{width:100%;height:40px;text-align:center;padding:9px 15px;font-size:15px;border-radius:5px;display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;color:var(--go-captcha-theme-btn-color);background-color:var(--go-captcha-theme-btn-bg-color);border:1px solid transparent;border-color:var(--go-captcha-theme-btn-bg-color);-webkit-appearance:none;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none}.go-captcha .gc-button-block button.disabled{pointer-events:none;background-color:var(--go-captcha-theme-btn-disabled-color);border-color:var(--go-captcha-theme-btn-disabled-color)}.go-captcha .gc-drag-slide-bar{width:100%;height:100%;position:relative;touch-action:none}.go-captcha .gc-drag-line{position:absolute;height:14px;background-color:var(--go-captcha-theme-drag-bar-color);left:0;right:0;top:50%;margin-top:-7px;border-radius:7px}.go-captcha .gc-drag-block{position:absolute;left:0;top:50%;margin-top:-20px;width:82px;height:40px;z-index:2;background-color:var(--go-captcha-theme-drag-bg-color);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;border-radius:24px;box-shadow:0 0 20px #64646459;-webkit-box-shadow:0 0 20px rgba(100,100,100,.35);-moz-box-shadow:0 0 20px rgba(100,100,100,.35);color:var(--go-captcha-theme-drag-icon-color);fill:var(--go-captcha-theme-drag-icon-color)}.go-captcha .gc-drag-block>*{display:flex;align-items:center;justify-content:center}.go-captcha .gc-drag-block.disabled{pointer-events:none;background-color:var(--go-captcha-theme-btn-disabled-color);border-color:var(--go-captcha-theme-btn-disabled-color)}.go-captcha .drag-block-inline{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.go-captcha .drag-block-inline>*{display:flex;align-items:center;justify-content:center}.go-captcha.gc-btn-block{position:relative;box-sizing:border-box;display:block;font-size:13px;-webkit-border-radius:5px;-moz-border-radius:5px;letter-spacing:1px;border-radius:5px;line-height:1;white-space:nowrap;-webkit-appearance:none;outline:none;margin:0;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center;justify-items:center;box-shadow:0 0 20px #3e7cff1a;-webkit-box-shadow:0 0 20px rgba(62,124,255,.1);-moz-box-shadow:0 0 20px rgba(62,124,255,.1)}.go-captcha.gc-btn-block span{padding-left:8px}.go-captcha.gc-disabled{pointer-events:none}.go-captcha.gc-default{color:var(--go-captcha-theme-default-color);border:1px solid #50a1ff;border-color:var(--go-captcha-theme-default-border-color);background-color:var(--go-captcha-theme-default-bg-color);cursor:pointer}.go-captcha.gc-default:hover{background-color:var(--go-captcha-theme-default-hover-color)!important}.go-captcha.gc-error{cursor:pointer;color:var(--go-captcha-theme-error-color);background-color:var(--go-captcha-theme-error-bg-color);border:1px solid #ff5a34;border-color:var(--go-captcha-theme-error-border-color)}.go-captcha.gc-warn{cursor:pointer;color:var(--go-captcha-theme-warn-color);background-color:var(--go-captcha-theme-warn-bg-color);border:1px solid #ffbe09;border-color:var(--go-captcha-theme-warn-border-color)}.go-captcha.gc-success{color:var(--go-captcha-theme-success-color);background-color:var(--go-captcha-theme-success-bg-color);border:1px solid #8bc640;border-color:var(--go-captcha-theme-success-border-color);pointer-events:none}.go-captcha .gc-ripple{position:relative;display:flex;align-items:center;justify-content:center;justify-items:center}.go-captcha .gc-ripple>*{z-index:2}.go-captcha .gc-ripple svg{position:relative;z-index:2}.go-captcha .gc-ripple:after{background-color:var(--go-captcha-theme-default-border-color);border-radius:50px;content:\"\";display:block;width:21px;height:21px;opacity:0;position:absolute;top:50%;left:50%;margin-top:-11px;margin-left:-11px;z-index:0;animation:gc-ripple 1.3s infinite;-moz-animation:gc-ripple 1.3s infinite;-webkit-animation:gc-ripple 1.3s infinite;animation-delay:2s;-moz-animation-delay:2s;-webkit-animation-delay:2s}@keyframes gc-ripple{0%{opacity:0}5%{opacity:.05}20%{opacity:.35}65%{opacity:.01}to{transform:scaleX(2) scaleY(2);opacity:0}}\n"] }]
}], propDecorators: { config: [{
type: Input
}], clickEvent: [{
type: Input
}], disabled: [{
type: Input
}], type: [{
type: Input
}], title: [{
type: Input
}] } });
const defaultClickConfig = () => ({
width: 300,
height: 220,
thumbWidth: 150,
thumbHeight: 40,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: true,
title: "请在下图依次点击",
buttonText: "确认",
iconSize: 22,
dotSize: 24,
});
const defaultData = () => ({
image: "", thumb: ""
});
/**
* @Author Awen
* @Date 2024/05/25
* @Email wengaolng@gmail.com
**/
function getDomXY(dom) {
let x = 0;
let y = 0;
if (dom.getBoundingClientRect) {
const box = dom.getBoundingClientRect();
const D = document.documentElement;
x = box.left + Math.max(D.scrollLeft, document.body.scrollLeft) - D.clientLeft;
y = box.top + Math.max(D.scrollTop, document.body.scrollTop) - D.clientTop;
}
else {
while (dom !== document.body) {
x += dom.offsetLeft;
y += dom.offsetTop;
dom = dom.offsetParent;
}
}
return {
domX: x,
domY: y
};
}
function checkTargetFather(that, e) {
let parent = e.relatedTarget;
try {
while (parent && parent !== that) {
parent = parent.parentNode;
}
}
catch (e) {
console.warn(e);
}
return parent !== that;
}
function mergeToOver(src, dest) {
for (const ccKey in src) {
if (dest.hasOwnProperty(ccKey)) {
dest[ccKey] = src[ccKey];
}
}
}
function mergeTo(src, dest) {
for (const ccKey in src) {
if (!dest.hasOwnProperty(ccKey)) {
dest[ccKey] = src[ccKey];
}
}
}
class CloseIconComponent {
constructor() {
this.width = 20;
this.height = 20;
}
}
CloseIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CloseIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CloseIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CloseIconComponent, selector: "close-icon", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<path d="M100.1,189.9C100.1,189.9,100,189.9,100.1,189.9c-49.7,0-90-40.4-90-89.9c0-49.6,40.4-89.9,89.9-89.9
\t\tc49.6,0,89.9,40.4,89.9,89.9c0,18.2-5.4,35.7-15.6,50.7c-1.5,2.1-3.6,3.4-6.1,3.9c-2.5,0.4-5-0.1-7-1.6c-4.2-3-5.3-8.6-2.4-12.9
\t\tc8.1-11.9,12.4-25.7,12.4-40.1c0-39.2-31.9-71.1-71.1-71.1c-39.2,0-71.1,31.9-71.1,71.1c0,39.2,31.9,71.1,71.1,71.1
\t\tc7.7,0,15.3-1.2,22.6-3.6c2.4-0.8,4.9-0.6,7.2,0.5c2.2,1.1,3.9,3.1,4.7,5.5c1.6,4.9-1,10.2-5.9,11.9
\t\tC119.3,188.4,109.8,189.9,100.1,189.9z M73,136.4C73,136.4,73,136.4,73,136.4c-2.5,0-4.9-1-6.7-2.8c-3.7-3.7-3.7-9.6,0-13.3
\t\tL86.7,100L66.4,79.7c-3.7-3.7-3.7-9.6,0-13.3c3.7-3.7,9.6-3.7,13.3,0L100,86.7l20.3-20.3c1.8-1.8,4.1-2.8,6.7-2.8c0,0,0,0,0,0
\t\tc2.5,0,4.9,1,6.7,2.8c1.8,1.8,2.8,4.1,2.8,6.7c0,2.5-1,4.9-2.8,6.7L113.3,100l20.3,20.3c3.7,3.7,3.7,9.6,0,13.3
\t\tc-3.7,3.7-9.6,3.7-13.3,0L100,113.3l-20.3,20.3C77.9,135.4,75.5,136.4,73,136.4z"/>
</svg>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CloseIconComponent, decorators: [{
type: Component,
args: [{
selector: 'close-icon',
template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<path d="M100.1,189.9C100.1,189.9,100,189.9,100.1,189.9c-49.7,0-90-40.4-90-89.9c0-49.6,40.4-89.9,89.9-89.9
\t\tc49.6,0,89.9,40.4,89.9,89.9c0,18.2-5.4,35.7-15.6,50.7c-1.5,2.1-3.6,3.4-6.1,3.9c-2.5,0.4-5-0.1-7-1.6c-4.2-3-5.3-8.6-2.4-12.9
\t\tc8.1-11.9,12.4-25.7,12.4-40.1c0-39.2-31.9-71.1-71.1-71.1c-39.2,0-71.1,31.9-71.1,71.1c0,39.2,31.9,71.1,71.1,71.1
\t\tc7.7,0,15.3-1.2,22.6-3.6c2.4-0.8,4.9-0.6,7.2,0.5c2.2,1.1,3.9,3.1,4.7,5.5c1.6,4.9-1,10.2-5.9,11.9
\t\tC119.3,188.4,109.8,189.9,100.1,189.9z M73,136.4C73,136.4,73,136.4,73,136.4c-2.5,0-4.9-1-6.7-2.8c-3.7-3.7-3.7-9.6,0-13.3
\t\tL86.7,100L66.4,79.7c-3.7-3.7-3.7-9.6,0-13.3c3.7-3.7,9.6-3.7,13.3,0L100,86.7l20.3-20.3c1.8-1.8,4.1-2.8,6.7-2.8c0,0,0,0,0,0
\t\tc2.5,0,4.9,1,6.7,2.8c1.8,1.8,2.8,4.1,2.8,6.7c0,2.5-1,4.9-2.8,6.7L113.3,100l20.3,20.3c3.7,3.7,3.7,9.6,0,13.3
\t\tc-3.7,3.7-9.6,3.7-13.3,0L100,113.3l-20.3,20.3C77.9,135.4,75.5,136.4,73,136.4z"/>
</svg>`,
}]
}], propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}] } });
class RefreshIconComponent {
constructor() {
this.width = 20;
this.height = 20;
}
}
RefreshIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RefreshIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
RefreshIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RefreshIconComponent, selector: "refresh-icon", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<path d="M135,149.9c-10.7,7.6-23.2,11.4-36,11.2c-1.7,0-3.4-0.1-5-0.3c-0.7-0.1-1.4-0.2-2-0.3c-1.3-0.2-2.6-0.4-3.9-0.6
\tc-0.8-0.2-1.6-0.4-2.3-0.5c-1.2-0.3-2.5-0.6-3.7-1c-0.6-0.2-1.2-0.4-1.7-0.6c-1.4-0.5-2.8-1-4.2-1.5c-0.3-0.1-0.6-0.3-0.9-0.4
\tc-1.6-0.7-3.2-1.4-4.7-2.3c-0.1,0-0.1-0.1-0.2-0.1c-5.1-2.9-9.8-6.4-14-10.6c-0.1-0.1-0.1-0.1-0.2-0.2c-1.3-1.3-2.5-2.7-3.7-4.1
\tc-0.2-0.3-0.5-0.6-0.7-0.9c-8.4-10.6-13.5-24.1-13.5-38.8h14.3c0.4,0,0.7-0.2,0.9-0.5c0.2-0.3,0.2-0.8,0-1.1L29.5,60.9
\tc-0.2-0.3-0.5-0.5-0.9-0.5c-0.4,0-0.7,0.2-0.9,0.5L3.8,97.3c-0.2,0.3-0.2,0.7,0,1.1c0.2,0.3,0.5,0.5,0.9,0.5h14.3
\tc0,17.2,5.3,33.2,14.3,46.4c0.1,0.2,0.2,0.4,0.3,0.6c0.9,1.4,2,2.6,3,3.9c0.4,0.5,0.7,1,1.1,1.5c1.5,1.8,3,3.5,4.6,5.2
\tc0.2,0.2,0.3,0.3,0.5,0.5c5.4,5.5,11.5,10.1,18.2,13.8c0.2,0.1,0.3,0.2,0.5,0.3c1.9,1,3.9,2,5.9,2.9c0.5,0.2,1,0.5,1.5,0.7
\tc1.7,0.7,3.5,1.3,5.2,1.9c0.8,0.3,1.7,0.6,2.5,0.8c1.5,0.5,3.1,0.8,4.7,1.2c1.1,0.2,2.1,0.5,3.2,0.7c0.4,0.1,0.9,0.2,1.3,0.3
\tc1.5,0.3,3,0.4,4.5,0.6c0.5,0.1,1.1,0.2,1.6,0.2c2.7,0.3,5.4,0.4,8.1,0.4c16.4,0,32.5-5.1,46.2-14.8c4.4-3.1,5.5-9.2,2.4-13.7
\tC145.5,147.8,139.4,146.7,135,149.9 M180.6,98.9c0-17.2-5.3-33.1-14.2-46.3c-0.1-0.2-0.2-0.5-0.4-0.7c-1.1-1.6-2.3-3.1-3.5-4.6
\tc-0.1-0.2-0.3-0.4-0.4-0.6c-8.2-10.1-18.5-17.9-30.2-23c-0.3-0.1-0.6-0.3-1-0.4c-1.9-0.8-3.8-1.5-5.7-2.1c-0.7-0.2-1.4-0.5-2.1-0.7
\tc-1.7-0.5-3.4-0.9-5.1-1.3c-0.9-0.2-1.9-0.5-2.8-0.7c-0.5-0.1-0.9-0.2-1.4-0.3c-1.3-0.2-2.6-0.3-3.8-0.5c-0.9-0.1-1.8-0.3-2.6-0.3
\tc-2.1-0.2-4.3-0.3-6.4-0.3c-0.4,0-0.8-0.1-1.2-0.1c-0.1,0-0.1,0-0.2,0c-16.4,0-32.4,5-46.2,14.8C49,35,48,41.1,51,45.6
\tc3.1,4.4,9.1,5.5,13.5,2.4c10.6-7.5,23-11.3,35.7-11.2c1.8,0,3.6,0.1,5.4,0.3c0.6,0.1,1.1,0.1,1.6,0.2c1.5,0.2,2.9,0.4,4.3,0.7
\tc0.6,0.1,1.3,0.3,1.9,0.4c1.4,0.3,2.8,0.7,4.2,1.1c0.4,0.1,0.9,0.3,1.3,0.4c1.6,0.5,3.1,1.1,4.6,1.7c0.2,0.1,0.3,0.1,0.5,0.2
\tc9,3.9,17,10,23.2,17.6c0,0,0.1,0.1,0.1,0.2c8.7,10.7,14,24.5,14,39.4H147c-0.4,0-0.7,0.2-0.9,0.5c-0.2,0.3-0.2,0.8,0,1.1l24,36.4
\tc0.2,0.3,0.5,0.5,0.9,0.5c0.4,0,0.7-0.2,0.9-0.5l23.9-36.4c0.2-0.3,0.2-0.7,0-1.1c-0.2-0.3-0.5-0.5-0.9-0.5L180.6,98.9L180.6,98.9
\tL180.6,98.9z"/>
</svg>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RefreshIconComponent, decorators: [{
type: Component,
args: [{
selector: 'refresh-icon',
template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<path d="M135,149.9c-10.7,7.6-23.2,11.4-36,11.2c-1.7,0-3.4-0.1-5-0.3c-0.7-0.1-1.4-0.2-2-0.3c-1.3-0.2-2.6-0.4-3.9-0.6
\tc-0.8-0.2-1.6-0.4-2.3-0.5c-1.2-0.3-2.5-0.6-3.7-1c-0.6-0.2-1.2-0.4-1.7-0.6c-1.4-0.5-2.8-1-4.2-1.5c-0.3-0.1-0.6-0.3-0.9-0.4
\tc-1.6-0.7-3.2-1.4-4.7-2.3c-0.1,0-0.1-0.1-0.2-0.1c-5.1-2.9-9.8-6.4-14-10.6c-0.1-0.1-0.1-0.1-0.2-0.2c-1.3-1.3-2.5-2.7-3.7-4.1
\tc-0.2-0.3-0.5-0.6-0.7-0.9c-8.4-10.6-13.5-24.1-13.5-38.8h14.3c0.4,0,0.7-0.2,0.9-0.5c0.2-0.3,0.2-0.8,0-1.1L29.5,60.9
\tc-0.2-0.3-0.5-0.5-0.9-0.5c-0.4,0-0.7,0.2-0.9,0.5L3.8,97.3c-0.2,0.3-0.2,0.7,0,1.1c0.2,0.3,0.5,0.5,0.9,0.5h14.3
\tc0,17.2,5.3,33.2,14.3,46.4c0.1,0.2,0.2,0.4,0.3,0.6c0.9,1.4,2,2.6,3,3.9c0.4,0.5,0.7,1,1.1,1.5c1.5,1.8,3,3.5,4.6,5.2
\tc0.2,0.2,0.3,0.3,0.5,0.5c5.4,5.5,11.5,10.1,18.2,13.8c0.2,0.1,0.3,0.2,0.5,0.3c1.9,1,3.9,2,5.9,2.9c0.5,0.2,1,0.5,1.5,0.7
\tc1.7,0.7,3.5,1.3,5.2,1.9c0.8,0.3,1.7,0.6,2.5,0.8c1.5,0.5,3.1,0.8,4.7,1.2c1.1,0.2,2.1,0.5,3.2,0.7c0.4,0.1,0.9,0.2,1.3,0.3
\tc1.5,0.3,3,0.4,4.5,0.6c0.5,0.1,1.1,0.2,1.6,0.2c2.7,0.3,5.4,0.4,8.1,0.4c16.4,0,32.5-5.1,46.2-14.8c4.4-3.1,5.5-9.2,2.4-13.7
\tC145.5,147.8,139.4,146.7,135,149.9 M180.6,98.9c0-17.2-5.3-33.1-14.2-46.3c-0.1-0.2-0.2-0.5-0.4-0.7c-1.1-1.6-2.3-3.1-3.5-4.6
\tc-0.1-0.2-0.3-0.4-0.4-0.6c-8.2-10.1-18.5-17.9-30.2-23c-0.3-0.1-0.6-0.3-1-0.4c-1.9-0.8-3.8-1.5-5.7-2.1c-0.7-0.2-1.4-0.5-2.1-0.7
\tc-1.7-0.5-3.4-0.9-5.1-1.3c-0.9-0.2-1.9-0.5-2.8-0.7c-0.5-0.1-0.9-0.2-1.4-0.3c-1.3-0.2-2.6-0.3-3.8-0.5c-0.9-0.1-1.8-0.3-2.6-0.3
\tc-2.1-0.2-4.3-0.3-6.4-0.3c-0.4,0-0.8-0.1-1.2-0.1c-0.1,0-0.1,0-0.2,0c-16.4,0-32.4,5-46.2,14.8C49,35,48,41.1,51,45.6
\tc3.1,4.4,9.1,5.5,13.5,2.4c10.6-7.5,23-11.3,35.7-11.2c1.8,0,3.6,0.1,5.4,0.3c0.6,0.1,1.1,0.1,1.6,0.2c1.5,0.2,2.9,0.4,4.3,0.7
\tc0.6,0.1,1.3,0.3,1.9,0.4c1.4,0.3,2.8,0.7,4.2,1.1c0.4,0.1,0.9,0.3,1.3,0.4c1.6,0.5,3.1,1.1,4.6,1.7c0.2,0.1,0.3,0.1,0.5,0.2
\tc9,3.9,17,10,23.2,17.6c0,0,0.1,0.1,0.1,0.2c8.7,10.7,14,24.5,14,39.4H147c-0.4,0-0.7,0.2-0.9,0.5c-0.2,0.3-0.2,0.8,0,1.1l24,36.4
\tc0.2,0.3,0.5,0.5,0.9,0.5c0.4,0,0.7-0.2,0.9-0.5l23.9-36.4c0.2-0.3,0.2-0.7,0-1.1c-0.2-0.3-0.5-0.5-0.9-0.5L180.6,98.9L180.6,98.9
\tL180.6,98.9z"/>
</svg>`,
}]
}], propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}] } });
class LoadingIconComponent {
constructor() {
this.width = 84;
this.height = 84;
}
}
LoadingIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadingIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
LoadingIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LoadingIconComponent, selector: "loading-icon", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" [attr.width]="width" [attr.height]="height">
<circle cx="50" cy="36.8101" r="10">
<animate attributeName="cy" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9" keyTimes="0;0.5;1" values="23;77;23"></animate>
</circle>
</svg>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadingIconComponent, decorators: [{
type: Component,
args: [{
selector: 'loading-icon',
template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" [attr.width]="width" [attr.height]="height">
<circle cx="50" cy="36.8101" r="10">
<animate attributeName="cy" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9" keyTimes="0;0.5;1" values="23;77;23"></animate>
</circle>
</svg>`,
}]
}], propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}] } });
class ClickComponent {
constructor() {
this.localConfig = defaultClickConfig();
this.localData = defaultData();
this.localEvents = {};
this.dots = [];
}
set config(config) {
mergeTo(this.localConfig, config);
this.localConfig = config;
}
set data(data) {
mergeTo(this.localData, data);
this.localData = data;
}
set events(events) {
mergeTo(this.localEvents, events);
this.localEvents = events;
}
get hasDisplayWrapperState() {
return (this.localConfig.width || 0) > 0 || (this.localConfig.height || 0) > 0;
}
get hasDisplayImageState() {
return (this.localData.image && this.localData.image.length > 0) || (this.localData.thumb && this.localData.thumb.length > 0);
}
clickEvent(e) {
const dom = e.currentTarget;
const xy = getDomXY(dom);
const mouseX = e.pageX || e.clientX;
const mouseY = e.pageY || e.clientY;
const domX = xy.domX;
const domY = xy.domY;
const xPos = mouseX - domX;
const yPos = mouseY - domY;
const xx = parseInt(xPos.toString());
const yy = parseInt(yPos.toString());
const date = new Date();
const index = this.dots.length;
this.dots.push({ key: date.getTime(), index: index + 1, x: xx, y: yy });
this.localEvents.click && this.localEvents.click(xx, yy);
e.cancelBubble = true;
e.preventDefault();
return false;
}
confirmEvent(e) {
const dotsStr = JSON.stringify(this.dots);
let dots = [];
try {
dots = JSON.parse(dotsStr);
}
catch (e) {
console.warn("parse dots error", e);
}
this.localEvents.confirm && this.localEvents.confirm(dots, () => {
this.dots = [];
});
e.cancelBubble = true;
e.preventDefault();
return false;
}
closeEvent(e) {
this.close();
e.cancelBubble = true;
e.preventDefault();
return false;
}
refreshEvent(e) {
this.refresh();
e.cancelBubble = true;
e.preventDefault();
return false;
}
reset() {
this.dots = [];
}
clear() {
this.reset();
setTimeout(() => {
this.localData.image = '';
this.localData.thumb = '';
}, 0);
}
close() {
this.localEvents.close && this.localEvents.close();
this.reset();
}
refresh() {
this.localEvents.refresh && this.localEvents.refresh();
this.reset();
}
}
ClickComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ClickComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ClickComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ClickComponent, selector: "go-captcha-click", inputs: { config: "config", data: "data", events: "events" }, ngImport: i0, template: "<div\n class=\"go-captcha gc-wrapper\"\n [class]=\"{'gc-theme': localConfig.showTheme}\"\n [style]=\"{\n width: (localConfig.width || 0) + ( localConfig.horizontalPadding * 2) + (localConfig.showTheme ? 2 : 0) + 'px',\n paddingLeft: localConfig.horizontalPadding + 'px',\n paddingRight: localConfig.horizontalPadding + 'px',\n paddingTop: localConfig.verticalPadding + 'px',\n paddingBottom: localConfig.verticalPadding + 'px',\n display: hasDisplayWrapperState ? 'block' : 'none'\n }\"\n >\n <div class=\"gc-header\">\n <span>{{ localConfig.title }}</span>\n <img\n [class]=\"{'gc-hide': localData.thumb == ''}\"\n [style]=\"{\n width: localConfig.thumbWidth + 'px',\n height: localConfig.thumbHeight + 'px'\n }\"\n [attr.src]=\"localData.thumb\"\n alt=\"\"\n />\n </div>\n <div\n class=\"gc-body\"\n [style]=\"{\n width: localConfig.width + 'px',\n height: localConfig.height + 'px',\n }\"\n >\n <div class=\"gc-loading\">\n <loading-icon></loading-icon>\n </div>\n <img\n class=\"gc-picture\"\n [class]=\"{'gc-hide': localData.image == ''}\"\n [style]=\"{\n width: localConfig.width + 'px',\n height: localConfig.height + 'px',\n display: hasDisplayImageState ? 'block' : 'none'\n }\"\n [attr.src]=\"localData.image\"\n alt=\"\"\n (click)=\"clickEvent($event)\"\n />\n <div class=\"gc-dots\">\n <div\n class=\"gc-dot\"\n *ngFor=\"let dot of dots;\"\n [style]=\"{\n top: (dot.y - 11) + 'px',\n left: (dot.x - 11) + 'px',\n }\"\n >{{dot.index}}</div>\n </div>\n </div>\n <div class=\"gc-footer\">\n <div class=\"gc-icon-block gc-icon-block2\">\n <close-icon\n [width]=\"localConfig.iconSize\"\n [height]=\"localConfig.iconSize\"\n (click)=\"closeEvent($event)\"\n ></close-icon>\n <refresh-icon\n [width]=\"localConfig.iconSize\"\n [height]=\"localConfig.iconSize\"\n (click)=\"refreshEvent($event)\"\n ></refresh-icon>\n </div>\n <div class=\"gc-button-block\">\n <button\n [class]=\"{'disabled': !hasDisplayImageState}\"\n (click)=\"confirmEvent($event)\"\n >{{ localConfig.buttonText }}</button>\n </div>\n </div>\n</div>", styles: [".gc-icon-block2{flex:1}.gc-dots{position:absolute;inset:0}.gc-dots .gc-dot{position:absolute;z-index:2;width:22px;height:22px;color:var(--go-captcha-theme-dot-color);background:var(--go-captcha-theme-dot-bg-color);border:3px solid #f7f9fb;border-color:var(--go-captcha-theme-dot-border-color);display:flex;align-items:center;justify-content:center;border-radius:20px;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CloseIconComponent, selector: "close-icon", inputs: ["width", "height"] }, { kind: "component", type: RefreshIconComponent, selector: "refresh-icon", inputs: ["width", "height"] }, { kind: "component", type: LoadingIconComponent, selector: "loading-icon", inputs: ["width", "height"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ClickComponent, decorators: [{
type: Component,
args: [{ selector: 'go-captcha-click', encapsulation: ViewEncapsulation.None, template: "<div\n class=\"go-captcha gc-wrapper\"\n [class]=\"{'gc-theme': localConfig.showTheme}\"\n [style]=\"{\n width: (localConfig.width || 0) + ( localConfig.horizontalPadding * 2) + (localConfig.showTheme ? 2 : 0) + 'px',\n paddingLeft: localConfig.horizontalPadding + 'px',\n paddingRight: localConfig.horizontalPadding + 'px',\n paddingTop: localConfig.verticalPadding + 'px',\n paddingBottom: localConfig.verticalPadding + 'px',\n display: hasDisplayWrapperState ? 'block' : 'none'\n }\"\n >\n <div class=\"gc-header\">\n <span>{{ localConfig.title }}</span>\n <img\n [class]=\"{'gc-hide': localData.thumb == ''}\"\n [style]=\"{\n width: localConfig.thumbWidth + 'px',\n height: localConfig.thumbHeight + 'px'\n }\"\n [attr.src]=\"localData.thumb\"\n alt=\"\"\n />\n </div>\n <div\n class=\"gc-body\"\n [style]=\"{\n width: localConfig.width + 'px',\n height: localConfig.height + 'px',\n }\"\n >\n <div class=\"gc-loading\">\n <loading-icon></loading-icon>\n </div>\n <img\n class=\"gc-picture\"\n [class]=\"{'gc-hide': localData.image == ''}\"\n [style]=\"{\n width: localConfig.width + 'px',\n height: localConfig.height + 'px',\n display: hasDisplayImageState ? 'block' : 'none'\n }\"\n [attr.src]=\"localData.image\"\n alt=\"\"\n (click)=\"clickEvent($event)\"\n />\n <div class=\"gc-dots\">\n <div\n class=\"gc-dot\"\n *ngFor=\"let dot of dots;\"\n [style]=\"{\n top: (dot.y - 11) + 'px',\n left: (dot.x - 11) + 'px',\n }\"\n >{{dot.index}}</div>\n </div>\n </div>\n <div class=\"gc-footer\">\n <div class=\"gc-icon-block gc-icon-block2\">\n <close-icon\n [width]=\"localConfig.iconSize\"\n [height]=\"localConfig.iconSize\"\n (click)=\"closeEvent($event)\"\n ></close-icon>\n <refresh-icon\n [width]=\"localConfig.iconSize\"\n [height]=\"localConfig.iconSize\"\n (click)=\"refreshEvent($event)\"\n ></refresh-icon>\n </div>\n <div class=\"gc-button-block\">\n <button\n [class]=\"{'disabled': !hasDisplayImageState}\"\n (click)=\"confirmEvent($event)\"\n >{{ localConfig.buttonText }}</button>\n </div>\n </div>\n</div>", styles: [".gc-icon-block2{flex:1}.gc-dots{position:absolute;inset:0}.gc-dots .gc-dot{position:absolute;z-index:2;width:22px;height:22px;color:var(--go-captcha-theme-dot-color);background:var(--go-captcha-theme-dot-bg-color);border:3px solid #f7f9fb;border-color:var(--go-captcha-theme-dot-border-color);display:flex;align-items:center;justify-content:center;border-radius:20px;cursor:default}\n"] }]
}], propDecorators: { config: [{
type: Input
}], data: [{
type: Input
}], events: [{
type: Input
}] } });
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const defaultSlideConfig = () => ({
width: 300,
height: 220,
thumbWidth: 150,
thumbHeight: 40,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: true,
title: "请拖动滑块完成拼图",
iconSize: 22,
scope: true,
});
const defaultSlideData = () => ({
thumbX: 0,
thumbY: 0,
thumbHeight: 0,
thumbWidth: 0,
image: '',
thumb: '',
});
class ArrowsIconComponent {
constructor() {
this.width = 20;
this.height = 20;
}
}
ArrowsIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1