go-captcha-angular
Version:
GoCaptcha for Angular, which implements click mode, slider mode, drag-drop mode and rotation mode.
1,263 lines • 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.10", ngImport: i0, type: ArrowsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ArrowsIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ArrowsIconComponent, selector: "arrows-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="M131.6,116.3c0,0-75.6,0-109.7,0c-9.1,0-16.2-7.4-16.2-16.2c0-9.1,7.4-16.2,16.2-16.2c28.7,0,109.7,0,109.7,0
\ts-5.4-5.4-30.4-30.7c-6.4-6.4-6.4-16.7,0-23.1s16.7-6.4,23.1,0l58.4,58.4c6.4,6.4,6.4,16.7,0,23.1c0,0-32.9,32.9-57.9,57.9
\tc-6.4,6.4-16.7,6.4-23.1,0c-6.4-6.4-6.4-16.7,0-23.1C121.8,126.2,131.6,116.3,131.6,116.3z"/>
</svg>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ArrowsIconComponent, decorators: [{
type: Component,
args: [{
selector: 'arrows-icon',
template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" [attr.width]="width" [attr.height]="height">
<path d="M131.6,116.3c0,0-75.6,0-109.7,0c-9.1,0-16.2-7.4-16.2-16.2c0-9.1,7.4-16.2,16.2-16.2c28.7,0,109.7,0,109.7,0
\ts-5.4-5.4-30.4-30.7c-6.4-6.4-6.4-16.7,0-23.1s16.7-6.4,23.1,0l58.4,58.4c6.4,6.4,6.4,16.7,0,23.1c0,0-32.9,32.9-57.9,57.9
\tc-6.4,6.4-16.7,6.4-23.1,0c-6.4-6.4-6.4-16.7,0-23.1C121.8,126.2,131.6,116.3,131.6,116.3z"/>
</svg>`,
}]
}], propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}] } });
class SlideComponent {
constructor() {
this.localConfig = { ...defaultSlideConfig() };
this.localData = { ...defaultSlideData() };
this.localEvents = {};
this.state = { dragLeft: 0, thumbLeft: this.localData.thumbX || 0 };
this.isFreeze = false;
this.dsFn = (event) => event.preventDefault();
}
set config(config) {
mergeTo(this.localConfig, config);
this.localConfig = config;
}
set data(data) {
mergeTo(this.localData, data);
this.localData = data;
this.updateState();
}
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);
}
ngAfterViewInit() {
this.dragBlockRef.nativeElement && this.dragBlockRef.nativeElement.addEventListener('dragstart', this.dsFn);
}
ngOnDestroy() {
this.dragBlockRef.nativeElement && this.dragBlockRef.nativeElement.removeEventListener('dragstart', this.dsFn);
}
updateState() {
if (!this.isFreeze) {
this.state.thumbLeft = (this.localData.thumbX || 0);
}
}
dragEvent(e) {
if (!checkTargetFather(this.dragBarRef.nativeElement, e)) {
return;
}
const touch = e.touches && e.touches[0];
const offsetLeft = this.dragBlockRef.nativeElement.offsetLeft;
const width = this.containerRef.nativeElement.offsetWidth;
const blockWidth = this.dragBlockRef.nativeElement.offsetWidth;
const maxWidth = width - blockWidth;
const tileWith = this.tileRef.nativeElement.offsetWidth;
const tileOffsetLeft = this.tileRef.nativeElement.offsetLeft;
const containerMaxWidth = width - tileWith;
const tileMaxWith = width - (tileWith + tileOffsetLeft);
const ratio = tileMaxWith / maxWidth;
let isMoving = false;
let tmpLeaveDragEvent = null;
let startX = 0;
let currentThumbX = 0;
if (touch) {
startX = touch.pageX - offsetLeft;
}
else {
startX = e.clientX - offsetLeft;
}
const moveEvent = (e) => {
isMoving = true;
const mTouche = e.touches && e.touches[0];
let left = 0;
if (mTouche) {
left = mTouche.pageX - startX;
}
else {
left = e.clientX - startX;
}
const ctX = tileOffsetLeft + (left * ratio);
if (left >= maxWidth) {
this.state.dragLeft = maxWidth;
currentThumbX = containerMaxWidth;
this.state.thumbLeft = currentThumbX;
return;
}
if (left <= 0) {
this.state.dragLeft = 0;
currentThumbX = tileOffsetLeft;
this.state.thumbLeft = currentThumbX;
return;
}
this.state.dragLeft = left;
currentThumbX = currentThumbX = ctX;
this.state.thumbLeft = currentThumbX;
this.localEvents.move && this.localEvents.move(currentThumbX, this.localData.thumbY || 0);
e.cancelBubble = true;
e.preventDefault();
};
const upEvent = (e) => {
if (!checkTargetFather(this.dragBarRef.nativeElement, e)) {
return;
}
clearEvent();
if (!isMoving) {
return;
}
isMoving = false;
if (currentThumbX < 0) {
return;
}
this.localEvents.confirm && this.localEvents.confirm({ x: parseInt(currentThumbX.toString()), y: this.localData.thumbY || 0 }, () => {
this.reset();
});
e.cancelBubble = true;
e.preventDefault();
};
const leaveDragBlockEvent = (e) => {
tmpLeaveDragEvent = e;
};
const enterDragBlockEvent = () => {
tmpLeaveDragEvent = null;
};
const leaveUpEvent = (_) => {
if (!tmpLeaveDragEvent) {
return;
}
upEvent(tmpLeaveDragEvent);
clearEvent();
};
const scope = this.localConfig.scope;
const dragDom = scope ? this.rootRef.nativeElement : this.dragBarRef.nativeElement;
const scopeDom = scope ? this.rootRef.nativeElement : document.body;
const clearEvent = () => {
scopeDom.removeEventListener("mousemove", moveEvent, false);
scopeDom.removeEventListener("touchmove", moveEvent, { passive: false });
dragDom.removeEventListener("mouseup", upEvent, false);
dragDom.removeEventListener("mouseenter", enterDragBlockEvent, false);
dragDom.removeEventListener("mouseleave", leaveDragBlockEvent, false);
dragDom.removeEventListener("touchend", upEvent, false);
scopeDom.removeEventListener("mouseleave", upEvent, false);
scopeDom.removeEventListener("mouseup", leaveUpEvent, false);
this.isFreeze = false;
};
this.isFreeze = true;
scopeDom.addEventListener("mousemove", moveEvent, false);
scopeDom.addEventListener("touchmove", moveEvent, { passive: false });
dragDom.addEventListener("mouseup", upEvent, false);
dragDom.addEventListener("mouseenter", enterDragBlockEvent, false);
dragDom.addEventListener("mouseleave", leaveDragBlockEvent, false);
dragDom.addEventListener("touchend", upEvent, false);
scopeDom.addEventListener("mouseleave", upEvent, false);
scopeDom.addEventListener("mouseup", leaveUpEvent, 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.state.dragLeft = 0;
this.state.thumbLeft = this.localData.thumbX || 0;
}
clear() {
this.reset();
setTimeout(() => {
this.localData.image = '';
this.localData.thumb = '';
this.localData.thumbX = 0;
this.localData.thumbY = 0;
this.localData.thumbHeight = 0;
this.localData.thumbWidth = 0;
}, 0);
}
close() {
this.localEvents.close && this.localEvents.close();
this.reset();
}
refresh() {
this.localEvents.refresh && this.localEvents.refresh();
this.reset();
}
}
SlideComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SlideComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SlideComponent, selector: "go-captcha-slide", inputs: { config: "config", data: "data", events: "events" }, viewQueries: [{ propertyName: "rootRef", first: true, predicate: ["rootRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "dragBlockRef", first: true, predicate: ["dragBlockRef"], descendants: true }, { propertyName: "dragBarRef", first: true, predicate: ["dragBarRef"], descendants: true }, { propertyName: "tileRef", first: true, predicate: ["tileRef"], descendants: true }], 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 #rootRef\n>\n <div class=\"gc-header\">\n <span>{{ localConfig.title }}</span>\n <div class=\"gc-icon-block\">\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>\n <div\n class=\"gc-body\"\n #containerRef\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]=\"{display: hasDisplayImageState ? 'block' : 'none'}\"\n [attr.src]=\"localData.image\"\n alt=\"\"\n />\n <div\n class=\"gc-tile\"\n #tileRef\n [style]=\"{\n width: localData.thumbWidth + 'px',\n height: localData.thumbHeight + 'px',\n top: localData.thumbY + 'px',\n left: state.thumbLeft + 'px'\n }\"\n >\n <img\n [class]=\"{'gc-hide': localData.thumb == ''}\"\n [attr.src]=\"localData.thumb\"\n [style]=\"{display: hasDisplayImageState ? 'block' : 'none'}\"\n alt=\"\"\n />\n </div>\n </div>\n <div class=\"gc-footer\">\n <div class=\"gc-drag-slide-bar\" #dragBarRef>\n <div class=\"gc-drag-line\"></div>\n <div\n class=\"gc-drag-block\"\n #dragBlockRef\n (mousedown)=\"dragEvent($event)\"\n [style]=\"{left: state.dragLeft + 'px'}\"\n [class]=\"{'disabled': !hasDisplayImageState}\"\n >\n <div class=\"drag-block-inline\" (touchstart)=\"dragEvent($event)\">\n <arrows-icon></arrows-icon>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [".go-captcha .gc-tile{position:absolute;z-index:2;cursor:pointer}.go-captcha .gc-tile img{display:block;cursor:pointer;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: ArrowsIconComponent, selector: "arrows-icon", inputs: ["width", "height"] }, { 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: SlideComponent, decorators: [{
type: Component,
args: [{ selector: 'go-captcha-slide', 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 #rootRef\n>\n <div class=\"gc-header\">\n <span>{{ localConfig.title }}</span>\n <div class=\"gc-icon-block\">\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>\n <div\n class=\"gc-body\"\n #containerRef\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]=\"{display: hasDisplayImageState ? 'block' : 'none'}\"\n [attr.src]=\"localData.image\"\n alt=\"\"\n />\n <div\n class=\"gc-tile\"\n #tileRef\n [style]=\"{\n width: localData.thumbWidth + 'px',\n height: localData.thumbHeight + 'px',\n top: localData.thumbY + 'px',\n left: state.thumbLeft + 'px'\n }\"\n >\n <img\n [class]=\"{'gc-hide': localData.thumb == ''}\"\n [attr.src]=\"localData.thumb\"\n [style]=\"{display: hasDisplayImageState ? 'block' : 'none'}\"\n alt=\"\"\n />\n </div>\n </div>\n <div class=\"gc-footer\">\n <div class=\"gc-drag-slide-bar\" #dragBarRef>\n <div class=\"gc-drag-line\"></div>\n <div\n class=\"gc-drag-block\"\n #dragBlockRef\n (mousedown)=\"dragEvent($event)\"\n [style]=\"{left: state.dragLeft + 'px'}\"\n [class]=\"{'disabled': !hasDisplayImageState}\"\n >\n <div class=\"drag-block-inline\" (touchstart)=\"dragEvent($event)\">\n <arrows-icon></arrows-icon>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [".go-captcha .gc-tile{position:absolute;z-index:2;cursor:pointer}.go-captcha .gc-tile img{display:block;cursor:pointer;width:100%;height:100%}\n"] }]
}], propDecorators: { rootRef: [{
type: ViewChild,
args: ['rootRef', { static: false }]
}], containerRef: [{
type: ViewChild,
args: ['containerRef', { static: false }]
}], dragBlockRef: [{
type: ViewChild,
args: ['dragBlockRef', { static: false }]
}], dragBarRef: [{
type: ViewChild,
args: ['dragBarRef', { static: false }]
}], tileRef: [{
type: ViewChild,
args: ['tileRef', { static: false }]
}], config: [{
type: Input
}], data: [{
type: Input
}], events: [{
type: Input
}] } });
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const defaultSlideRegionConfig = () => ({
width: 300,
height: 220,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: true,
title: "请拖动滑块完成拼图",
iconSize: 22,
scope: true,
});
class SlideRegionComponent {
constructor() {
this.localConfig = defaultSlideRegionConfig();
this.localData = {
thumbX: 0,
thumbY: 0,
thumbWidth: 0,
thumbHeight: 0,
image: "",
thumb: ""
};
this.localEvents = {};
this.state = { x: this.localData.thumbX || 0, y: this.localData.thumbY || 0 };
this.isFreeze = false;
this.dsFn = (event) => event.preventDefault();
}
set config(config) {
mergeTo(this.localConfig, config);
this.localConfig = config;
}
set data(data) {
mergeTo(this.localData, data);
this.localData = data;
this.updateState();
}
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);
}
ngAfterViewInit() {
this.tileRef.nativeElement && this.tileRef.nativeElement.addEventListener('dragstart', this.dsFn);
}
ngOnDestroy() {
this.tileRef.nativeElement && this.tileRef.nativeElement.removeEventListener('dragstart', this.dsFn);
}
updateState() {
if (!this.isFreeze) {
this.state.x = (this.localData.thumbX || 0);
this.state.y = (this.localData.thumbY || 0);
}
}
dragEvent(e) {
if (!checkTargetFather(this.containerRef.nativeElement, e)) {
return;
}
const touch = e.touches && e.touches[0];
const offsetLeft = this.tileRef.nativeElement.offsetLeft;
const offsetTop = this.tileRef.nativeElement.offsetTop;
const width = this.containerRef.nativeElement.offsetWidth;
const height = this.containerRef.nativeElement.offsetHeight;
const tileWidth = this.tileRef.nativeElement.offsetWidth;
const tileHeight = this.tileRef.nativeElement.offsetHeight;
const maxWidth = width - tileWidth;
const maxHeight = height - tileHeight;
let isMoving = false;
let tmpLeaveDragEvent = null;
let startX = 0;
let startY = 0;
let tileLeft = 0;
let tileTop = 0;
if (touch) {
startX = touch.pageX - offsetLeft;
startY = touch.pageY - offsetTop;
}
else {
startX = e.clientX - offsetLeft;
startY = e.clientY - offsetTop;
}
const moveEvent = (e) => {
isMoving = true;
const mTouche = e.touches && e.touches[0];
let left = 0;
let top = 0;
if (mTouche) {
left = mTouche.pageX - startX;
top = mTouche.pageY - startY;
}
else {
left = e.clientX - startX;
top = e.clientY - startY;
}
if (left <= 0) {
left = 0;
}
if (top <= 0) {
top = 0;
}
if (left >= maxWidth) {
left = maxWidth;
}
if (top >= maxHeight) {
top = maxHeight;
}
this.state.x = left;
this.state.y = top;
tileLeft = left;
tileTop = top;
this.localEvents.move && this.localEvents.move(left, top);
e.cancelBubble = true;
e.preventDefault();
};
const upEvent = (e) => {
if (!checkTargetFather(this.containerRef.nativeElement, e)) {
return;
}
clearEvent();
if (!isMoving) {
return;
}
isMoving = false;
if (tileLeft < 0 || tileTop < 0) {
return;
}
this.localEvents.confirm && this.localEvents.confirm({ x: tileLeft, y: tileTop }, () => {
this.reset();
});
e.cancelBubble = true;
e.preventDefault();
};
const leaveDragBlockEvent = (e) => {
tmpLeaveDragEvent = e;
};
const enterDragBlockEvent = () => {
tmpLeaveDragEvent = null;
};
const leaveUpEvent = (_) => {
if (!tmpLeaveDragEvent) {
return;
}
upEvent(tmpLeaveDragEvent);
clearEvent();
};
const scope = this.localConfig.scope;
const dragDom = scope ? this.rootRef.nativeElement : this.dragBarRef.nativeElement;
const scopeDom = scope ? this.rootRef.nativeElement : document.body;
const clearEvent = () => {
scopeDom.removeEventListener("mousemove", moveEvent, false);
scopeDom.removeEventListener("touchmove", moveEvent, { passive: false });
dragDom.removeEventListener("mouseup", upEvent, false);
dragDom.removeEventListener("mouseenter", enterDragBlockEvent, false);
dragDom.removeEventListener("mouseleave", leaveDragBlockEvent, false);
dragDom.removeEventListener("touchend", upEvent, false);
scopeDom.removeEventListener("mouseleave", upEvent, false);
scopeDom.removeEventListener("mouseup", leaveUpEvent, false);
this.isFreeze = false;
};
this.isFreeze = true;
scopeDom.addEventListener("mousemove", moveEvent, false);
scopeDom.addEventListener("touchmove", moveEvent, { passive: false });
dragDom.addEventListener("mouseup", upEvent, false);
dragDom.addEventListener("mouseenter", enterDragBlockEvent, false);
dragDom.addEventListener("mouseleave", leaveDragBlockEvent, false);
dragDom.addEventListener("touchend", upEvent, false);
scopeDom.addEventListener("mouseleave", upEvent, false);
scopeDom.addEventListener("mouseup", leaveUpEvent, 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.state.x = this.localData.thumbX || 0;
this.state.y = this.localData.thumbY || 0;
}
clear() {
this.reset();
setTimeout(() => {
this.localData.image = '';
this.localData.thumb = '';
this.localData.thumbX = 0;
this.localData.thumbY = 0;
this.localData.thumbHeight = 0;
this.localData.thumbWidth = 0;
}, 0);
}
close() {
this.localEvents.close && this.localEvents.close();
this.reset();
}
refresh() {
this.localEvents.refresh && this.localEvents.refresh();
this.reset();
}
}
SlideRegionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SlideRegionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SlideRegionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SlideRegionComponent, selector: "go-captcha-slide-region", inputs: { config: "config", data: "data", events: "events" }, viewQueries: [{ propertyName: "rootRef", first: true, predicate: ["rootRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "dragBlockRef", first: true, predicate: ["dragBlockRef"], descendants: true }, { propertyName: "dragBarRef", first: true, predicate: ["dragBarRef"], descendants: true }, { propertyName: "tileRef", first: true, predicate: ["tileRef"], descendants: true }], 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 #rootRef\n>\n <div class=\"gc-header gc-header2\">\n <span>{{ localConfig.title }}</span>\n </div>\n <div\n class=\"gc-body\"\n #containerRef\n [style]=\"{width: localConfig.width + 'px', height: localConfig.height + 'px'}\"\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]=\"{display: hasDisplayImageState ? 'block' : 'none'}\"\n [attr.src]=\"localData.image\"\n alt=\"\"\n />\n <div\n class=\"gc-tile\"\n #tileRef\n [style]=\"{\n width: localData.thumbWidth + 'px',\n height: localData.thumbHeight + 'px',\n top: state.y + 'px',\n left: state.x + 'px'\n }\"\n (mousedown)=\"dragEvent($event)\"\n (touchstart)=\"dragEvent($event)\"\n >\n <img\n [class]=\"{'gc-hide': localData.thumb == ''}\"\n [style]=\"{display: hasDisplayImageState ? 'block' : 'none'}\"\n [attr.src]=\"localData.thumb\"\n alt=\"\"\n />\n </div>\n </div>\n <div class=\"gc-footer\">\n <div class=\"gc-icon-block\">\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>\n</div>", styles: [".go-captcha .gc-header2{text-align:center}.go-captcha .gc-tile{position:absolute;z-index:2;cursor:pointer}.go-captcha .gc-tile img{display:block;cursor:pointer;width:100%;height:100%}\n"], dependencies: [{ 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: SlideRegionComponent, decorators: [{
type: Component,
args: [{ selector: 'go-captcha-slide-region', 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 #rootRef\n>\n <div class=\"gc-header gc-header2\">\n <span>{{ localConfig.title }}</span>\n </div>\n <div\n class=\"gc-body\"\n #containerRef\n [style]=\"{width: localConfig.width + 'px', height: localConfig.height + 'px'}\"\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]=\"{display: hasDisplayImageState ? 'block' : 'none'}\"\n [attr.src]=\"localData.image\"\n alt=\"\"\n />\n <div\n class=\"gc-tile\"\n #tileRef\n [style]=\"{\n width: localData.thumbWidth + 'px',\n height: localData.thumbHeight + 'px',\n top: state.y + 'px',\n left: state.x + 'px'\n }\"\n (mousedown)=\"dragEvent($event)\"\n (touchstart)=\"dragEvent($event)\"\n >\n <img\n [class]=\"{'gc-hide': localData.thumb == ''}\"\n [style]=\"{display: hasDisplayImageState ? 'block' : 'none'}\"\n [attr.src]=\"localData.thumb\"\n alt=\"\"\n />\n </div>\n </div>\n <div class=\"gc-footer\">\n <div class=\"gc-icon-block\">\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>\n</div>", styles: [".go-captcha .gc-header2{text-align:center}.go-captcha .gc-tile{position:absolute;z-index:2;cursor:pointer}.go-captcha .gc-tile img{display:block;cursor:pointer;width:100%;height:100%}\n"] }]
}], propDecorators: { rootRef: [{
type: ViewChild,
args: ['rootRef', { static: false }]
}], containerRef: [{
type: ViewChild,
args: ['containerRef', { static: false }]
}], dragBlockRef: [{
type: ViewChild,
args: ['dragBlockRef', { static: false }]
}], dragBarRef: [{
type: ViewChild,
args: ['dragBarRef', { static: false }]
}], tileRef: [{
type: ViewChild,
args: ['tileRef', { static: false }]
}], config: [{
type: Input
}], data: [{
type: Input
}], events: [{
type: Input
}] } });
const defaultRotateConfig = () => ({
width: 300,
height: 220,
size: 220,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: true,
title: "请拖动滑块完成拼图",
iconSize: 22,
scope: true,
});
const defaultRotateData = () => ({
angle: 0,
image: '',
thumb: '',
thumbSize: 0
});
class RotateComponent {
constructor() {
this.localConfig = defaultRotateConfig();
this.localData = defaultRotateData();
this.localEvents = {};
this.dragLeft = 0;
this.thumbAngle = this.localData.angle || 0;
this.isFreeze = false;
this.dsFn = (event) => event.preventDefault();
this.dragEvent = (e) => {
if (!checkTargetFather(this.dragBarRef.nativeElement, e)) {
return;
}
const touch = e.touches && e.touches[0];
const offsetLeft = this.dragBlockRef.nativeElement.offsetLeft;
const width = this.dragBarRef.nativeElement.offsetWidth;
const blockWidth = this.dragBlockRef.nativeElement.offsetWidth;
const maxWidth = width - blockWidth;
const maxAngle = 360;
const p = (maxAngle - this.localData.angle) / maxWidth;
let angle = 0;
let isMoving = false;
let tmpLeaveDragEvent = null;
let startX = 0;
let currentAngle = 0;
if (touch) {
startX = touch.pageX - offsetLeft;
}
else {
startX = e.clientX - offsetLeft;
}
const moveEvent = (e) => {
isMoving = true;
const mTouche = e.touches && e.touches[0];
let left = 0;
if (mTouche) {
left = mTouche.pageX - startX;
}
else {
left = e.clientX - startX;
}
angle = this.localData.angle + (left * p);
if (left >= maxWidth) {
this.dragLeft = maxWidth;
this.thumbAngle = currentAngle = maxAngle;
return;
}
if (left <= 0) {
this.dragLeft = 0;
this.thumbAngle = currentAngle = this.localData.angle;
return;
}
this.dragLeft = left;
currentAngle = angle;
this.thumbAngle = angle;
this.localEvents.rotate && this.localEvents.rotate(angle);
e.cancelBubble = true;
e.preventDefault();
};
const upEvent = (e) => {
if (!checkTargetFather(this.dragBarRef.nativeElement, e)) {
return;
}
clearEvent();
if (!isMoving) {
return;
}
isMoving = false;
if (currentAngle < 0) {
return;
}
this.localEvents.confirm && this.localEvents.confirm(parseInt(currentAngle.toString()), () => {
this.reset();
});
e.cancelBubble = true;
e.preventDefault();
};
const leaveDragBlockEvent = (e) => {
tmpLeaveDragEvent = e;
};
const enterDragBlockEvent = () => {
tmpLeaveDragEvent = null;
};
const leaveUpEvent = (_) => {
if (!tmpLeaveDragEvent) {
return;
}
upEvent(tmpLeaveDragEvent);
clearEvent();
};
const scope = this.localConfig.scope;
const dragDom = scope ? this.rootRef.nativeElement : this.dragBarRef.nativeElement;
const scopeDom = scope ? this.rootRef.nativeElement : document.body;
const clearEvent = () => {
scopeDom.removeEventListener("mousemove", moveEvent, false);
scopeDom.removeEventListener("touchmove", moveEvent, { passive: false });
dragDom.removeEventListener("mouseup", upEvent, false);
dragDom.removeEventListener("mouseenter", enterDragBlockEvent, false);
dragDom.removeEventListener("mouseleave", leaveDragBlockEvent, false);
dragDom.removeEventListener("touchend", upEvent, false);
scopeDom.removeEventListener("mouseleave", upEvent, false);
scopeDom.removeEventListener("mouseup", leaveUpEvent, false);
};
scopeDom.addEventListener("mousemove", moveEvent, false);
scopeDom.addEventListener("touchmove", moveEvent, { passive: false });
dragDom.addEventListener("mouseup", upEvent, false);
dragDom.addEventListener("mouseenter", enterDragBlockEvent, false);
dragDom.addEventListener("mouseleave", leaveDragBlockEvent, false);
dragDom.addEventListener("touchend", upEvent, false);
scopeDom.addEventListener("mouseleave", upEvent, false);
scopeDom.addEventListener("mouseup", leaveUpEvent, false);
};
}
set config(config) {
mergeTo(this.localConfig, config);
this.localConfig = config;
}
set data(data) {
mergeTo(this.localData, data);
this.localData = data;
this.updateState();
}
set events(events) {
mergeTo(this.localEvents, events);
this.localEvents = events;
}
get thumbSizeStyle() {
return {
transform: 'rotate(' + this.thumbAngle + 'deg)',
...(this.localData.thumbSize > 0 ? {
width: this.localData.thumbSize + 'px',
height: this.localData.thumbSize + 'px'
} : {})
};
}
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);
}
get size() {
return (this.localConfig.size || 0) > 0 ? this.localConfig.size : defaultRotateConfig().size;
}
ngAfterViewInit() {
this.dragBlockRef.nativeElement && this.dragBlockRef.nativeElement.addEventListener('dragstart', this.dsFn);
}
ngOnDestroy() {
this.dragBlockRef.nativeElement && this.dragBlockRef.nativeElement.removeEventListener('dragstart', this.dsFn);
}
updateState() {
if (!this.isFreeze) {
this.thumbAngle = (this.localData.angle || 0);
}
}
closeEvent(e) {
this.close();
e.cancelBubble = true;
e.preventDefault();
return false;
}
refreshEvent(e) {
this.refresh();
e.cancelBubble = true;
e.preventDefault();
return false;
}
reset() {
this.dragLeft = 0;
this.thumbAngle = this.localData.angle;
}
clear() {
this.reset();
setTimeout(() => {
this.localData.image = '';
this.localData.thumb = '';
this.localData.angle = 0;
}, 0);
}
close() {
this.localEvents.close && this.localEvents.close();
this.reset();
}
refresh() {
this.localEvents.refresh && this.localEvents.refresh();
this.reset();
}
}
RotateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RotateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
RotateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RotateComponent, selector: "go-captcha-rotate", inputs: { config: "config", data: "data", events: "events" }, viewQueries: [{ propertyName: "rootRef", first: true, predicate: ["rootRef"], descendants: true }, { propertyName: "dragBlockRef", first: true, predicate: ["dragBlockRef"], descendants: true }, { propertyName: "dragBarRef", first: true, predicate: ["dragBarRef"], descendants: true }], 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 #rootRef\n >\n <div class=\"gc-header\">\n <span>{{ localConfig.title }}</span>\n <div class=\"gc-icon-block\">\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>\n <div\n class=\"gc-body gc-rotate-body\"\n [style]=\"{width: localConfig.width + 'px', height: localConfig.height + 'px'}\"\n >\n <div class=\"gc-body-inner\" [style]=\"{width: size + 'px', height: size + 'px' }\">\n <div class=\"gc-loading\">\n <loading-icon></loading-icon>\n </div>\n <div\n class=\"gc-picture gc-rotate-picture\"\n [style]=\"{width: localConfig.size + 'px', height: localConfig.size + 'px'}\"\n >\n <img\n [class]=\"{'gc-hide': localData.image == ''}\"\n [style]=\"{visibility: hasDisplayImageState ? 'visible' : 'hidden'}\"\n [src]=\"localData.image\"\n alt=\"\"\n />\n <div class=\"gc-round\"></div>\n </div>\n\n <div class=\"gc-thumb gc-rotate-thumb\">\n <div\n class=\"gc-rotate-thumb-block\"\n [style]=\"thumbSizeStyle\"\n >\n <img\n [class]=\"{'gc-hide': localData.thumb == ''}\"\n [style]=\"{display: hasDisplayImageState ? 'block' : 'none'}\"\n [src]=\"localData.thumb\"\n alt=\"\"\n />\n </div>\n </div>\n </div>\n </div>\n <div class=\"gc-footer\">\n <div class=\"gc-drag-slide-bar\" #dragBarRef>\n <div class=\"gc-drag-line\"></div>\n <div\n class=\"gc-drag-block\"\n #dragBlockRef\n (mousedown)=\"dragEvent($event)\"\n [style]=\"{left: dragLeft + 'px'}\"\n [class]=\"{'disabled': !hasDisplayImageState}\"\n >\n <div class=\"drag-block-inline\" (touchstart)=\"dragEvent($event)\">\n <arrows-icon></arrows-icon>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [".go-captcha .gc-rotate-body{background:transparent!important;display:flex;display:-webkit-flex;justify-content:center;align-items:center;margin:10px auto 0}.go-captcha .gc-rotate-body .gc-body-inner{border-radius:100%}.go-captcha .gc-rotate-picture{position:relative;max-width:100%;max-height:100%;z-index:2;border-radius:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.go-captcha .gc-rotate-picture img{max-width:100%;max-height:100%}.go-captcha .gc-rotate-picture .gc-round{position:absolute;inset:0;border-radius:100%;z-index:2;border:6px solid #e0e0e0;border-color:var(--go-captcha-theme-round-color)}.go-captcha .gc-rotate-thumb{position:absolute;z-index:2;inset:0;display:flex;justify-content:center;align-items:center}.go-captcha .gc-rotate-thumb img{max-width:100%;max-height:100%}.go-captcha .gc-rotate-thumb-block{width:100%;height:100%;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: ArrowsIconComponent, selector: "arrows-icon", inputs: ["width", "height"] }, { 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: RotateComponent, decorators: [{
type: Component,
args: [{ selector: 'go-captcha-rotate', 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 #rootRef\n >\n <div class=\"gc-header\">\n <span>{{ localConfig.title }}</span>\n <div class=\"gc-icon-block\">\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>\n <div\n class=\"gc-body gc-rotate-body\"\n [style]=\"{width: localConfig.width + 'px', height: localConfig.height + 'px'}\"\n >\n <div class=\"gc-body-inner\" [style]=\"{width: size + 'px', height: size + 'px' }\">\n <div class=\"gc-loading\">\n <loading-icon></loading-icon>\n </div>\n <div\n class=\"gc-picture gc-rotate-picture\"\n [style]=\"{width: localConfig.size + 'px', height: localConfig.size + 'px'}\"\n >\n <img\n [class]=\"{'gc-hide': localData.image == ''}\"\n [style]=\"{visibility: hasDisplayImageState ? 'visible' : 'hidden'}\"\n [src]=\"localData.image\"\n alt=\"\"\n />\n <div class=\"gc-round\"></div>\n </div>\n\n <div class=\"gc-thumb gc-rotate-thumb\">\n <div\n class=\"gc-rotate-thumb-block\"\n [style]=\"thumbSizeStyle\"\n >\n <img\n [class]=\"{'gc-hide': localData.thumb == ''}\"\n [style]=\"{display: hasDisplayImageState ? 'block' : 'none'}\"\n [src]=\"localData.thumb\"\n alt=\"\"\n />\n </div>\n </div>\n </div>\n </div>\n <div class=\"gc-footer\">\n <div class=\"gc-drag-slide-bar\" #dragBarRef>\n <div class=\"gc-drag-line\"></div>\n <div\n class=\"gc-drag-block\"\n #dragBlockRef\n (mousedown)=\"dragEvent($event)\"\n [style]=\"{left: dragLeft + 'px'}\"\n [class]=\"{'disabled': !hasDisplayImageState}\"\n >\n <div class=\"drag-block-inline\" (touchstart)=\"dragEvent($event)\">\n <arrows-icon></arrows-icon>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [".go-captcha .gc-rotate-body{background:transparent!important;display:flex;display:-webkit-flex;justify-content:center;align-items:center;margin:10px auto 0}.go-captcha .gc-rotate-body .gc-body-inner{border-radius:100%}.go-captcha .gc-rotate-picture{position:relative;max-width:100%;max-height:100%;z-index:2;border-radius:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.go-captcha .gc-rotate-picture img{max-width:100%;max-height:100%}.go-captcha .gc-rotate-picture .gc-round{position:absolute;inset:0;border-radius:100%;z-index:2;border:6px solid #e0e0e0;border-color:var(--go-captcha-theme-round-color)}.go-captcha .gc-rotate-thumb{position:absolute;z-index:2;inset:0;display:flex;justify-content:center;align-items:center}.go-captcha .gc-rotate-thumb img{max-width:100%;max-height:100%}.go-captcha .gc-rotate-thumb-block{width:100%;height:100%;display:flex;justify-content:center;align-items:center}\n"] }]
}], propDecorators: { rootRef: [{
type: ViewChild,
args: ['rootRef', { static: false }]
}], dragBlockRef: [{
type: ViewChild,
args: ['dragBlockRef', { static: false }]
}], dragBarRef: [{
type: ViewChild,
args: ['dragBarRef', { static: false }]
}], config: [{
type: Input
}], data: [{
type: Input
}], events: [{
type: Input
}] } });
class GoCaptchaModule {
}
GoCaptchaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GoCaptchaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
GoCaptchaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: GoCaptchaModule, declarations: [ClickComponent,
SlideComponent,
RotateComponent,
SlideRegionComponent,
ButtonComponent,
// icons component
ArrowsIconComponent,
BtnDefaultIconComponent,
BtnErrorIconComponent,
BtnWarnIconComponent,
BtnSuccessIconComponent,
CloseIconComponent,
RefreshIconComponent,
LoadingIconComponent], imports: [CommonModule], exports: [ClickComponent,
SlideComponent,
SlideRegionComponent,
RotateComponent,
ButtonComponent] });
GoCaptchaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GoCaptchaModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GoCaptchaModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [
ClickComponent,
SlideComponent,
RotateComponent,
SlideRegionComponent,
ButtonComponent,
// icons component
ArrowsIconComponent,
BtnDefaultIconComponent,
BtnErrorIconComponent,
BtnWarnIconComponent,
BtnSuccessIconComponent,
CloseIconComponent,
RefreshIconComponent,
LoadingIconComponent,
],
providers: [],
exports: [
ClickComponent,
SlideComponent,
SlideRegionComponent,
RotateComponent,
ButtonComponent
],
}]
}] });
/*
* Public API Surface of go-captcha-angular
*/
/**
* Generated bundle index. Do not edit.
*/
export { ButtonComponent, ClickComponent, GoCaptchaModule, RotateComponent, SlideComponent, SlideRegionComponent, defaultButtonConfig, defaultClickConfig, defaultData, defaultRotateConfig, defaultRotateData, defaultSlideConfig, defaultSlideData, defaultSlideRegionConfig };
//# sourceMappingURL=go-captcha-angular.mjs.map