s4y-ui 3.0.2 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/s4y-ui.mjs
CHANGED
|
@@ -1393,19 +1393,12 @@ class CheckboxComponent {
|
|
|
1393
1393
|
id = input.required();
|
|
1394
1394
|
name = input.required();
|
|
1395
1395
|
label = input();
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
get value() {
|
|
1399
|
-
return this._value;
|
|
1400
|
-
}
|
|
1401
|
-
set value(val) {
|
|
1402
|
-
this._value = val;
|
|
1403
|
-
this.onChange(val);
|
|
1404
|
-
}
|
|
1396
|
+
disabled = false;
|
|
1397
|
+
value = false;
|
|
1405
1398
|
onChange = (value) => { };
|
|
1406
1399
|
onTouched = () => { };
|
|
1407
1400
|
writeValue(value) {
|
|
1408
|
-
this.
|
|
1401
|
+
this.value = value;
|
|
1409
1402
|
}
|
|
1410
1403
|
registerOnChange(fn) {
|
|
1411
1404
|
this.onChange = fn;
|
|
@@ -1414,32 +1407,37 @@ class CheckboxComponent {
|
|
|
1414
1407
|
this.onTouched = fn;
|
|
1415
1408
|
}
|
|
1416
1409
|
setDisabledState(isDisabled) {
|
|
1417
|
-
this.
|
|
1410
|
+
this.disabled = isDisabled;
|
|
1418
1411
|
}
|
|
1419
|
-
onToggleCheckbox() {
|
|
1420
|
-
if (this.
|
|
1412
|
+
onToggleCheckbox(checked) {
|
|
1413
|
+
if (this.disabled)
|
|
1421
1414
|
return;
|
|
1422
|
-
|
|
1423
|
-
this.
|
|
1415
|
+
// Evita log duplicado
|
|
1416
|
+
if (this.value !== checked) {
|
|
1417
|
+
this.value = checked;
|
|
1418
|
+
this.onChange(this.value);
|
|
1419
|
+
this.onTouched();
|
|
1420
|
+
// console.log('onToggleCheckbox:', this.value); // <-- imprime 1x
|
|
1421
|
+
}
|
|
1424
1422
|
}
|
|
1425
1423
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1426
1424
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: CheckboxComponent, isStandalone: true, selector: "s4y-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1427
1425
|
{
|
|
1428
1426
|
provide: NG_VALUE_ACCESSOR,
|
|
1429
|
-
useExisting: CheckboxComponent,
|
|
1427
|
+
useExisting: forwardRef(() => CheckboxComponent),
|
|
1430
1428
|
multi: true,
|
|
1431
1429
|
},
|
|
1432
|
-
], ngImport: i0, template: "<div\r\n class=\"s4y-checkbox-wrapper\"\r\n (click)=\"onToggleCheckbox()\"\r\n [class.disabled]=\"
|
|
1430
|
+
], ngImport: i0, template: "<div\r\n class=\"s4y-checkbox-wrapper\"\r\n (click)=\"onToggleCheckbox(checkboxInput.checked)\"\r\n [class.disabled]=\"disabled\"\r\n>\r\n <input\r\n class=\"s4y-inp-cbx\"\r\n [id]=\"id()\"\r\n [name]=\"name()\"\r\n type=\"checkbox\"\r\n [checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n #checkboxInput\r\n />\r\n <label class=\"cbx\" [for]=\"id()\"\r\n ><span>\r\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </svg>\r\n </span>\r\n @if (label()) {\r\n <span>\r\n {{ label() }}\r\n </span>\r\n }\r\n </label>\r\n</div>\r\n", styles: [":host{display:block;width:max-content}.s4y-checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.s4y-checkbox-wrapper .cbx{margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.s4y-checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0);font-size:1.4rem;color:var(--gray-900)}.s4y-checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:3px;transform:scale(1);vertical-align:middle;border:1px solid #9098a9;transition:all .2s ease}.s4y-checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.s4y-checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--primary-color);display:block;transform:scale(0);opacity:1;border-radius:50%}.s4y-checkbox-wrapper .cbx span:last-child{padding-left:8px}.s4y-checkbox-wrapper .cbx:hover span:first-child{border-color:var(--primary-color)}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child{background:var(--primary-color);border-color:var(--primary-color);animation:wave-46 .4s ease}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave-46{50%{transform:scale(.9)}}.s4y-checkbox-wrapper.disabled .cbx:hover span:first-child{background-color:var(--gray-400)}.s4y-checkbox-wrapper.disabled .s4y-inp-cbx:checked+.cbx span:first-child{background-color:var(--gray-400);border-color:var(--gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
|
|
1433
1431
|
}
|
|
1434
1432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1435
1433
|
type: Component,
|
|
1436
1434
|
args: [{ selector: 's4y-checkbox', imports: [FormsModule], providers: [
|
|
1437
1435
|
{
|
|
1438
1436
|
provide: NG_VALUE_ACCESSOR,
|
|
1439
|
-
useExisting: CheckboxComponent,
|
|
1437
|
+
useExisting: forwardRef(() => CheckboxComponent),
|
|
1440
1438
|
multi: true,
|
|
1441
1439
|
},
|
|
1442
|
-
], template: "<div\r\n class=\"s4y-checkbox-wrapper\"\r\n (click)=\"onToggleCheckbox()\"\r\n [class.disabled]=\"
|
|
1440
|
+
], standalone: true, template: "<div\r\n class=\"s4y-checkbox-wrapper\"\r\n (click)=\"onToggleCheckbox(checkboxInput.checked)\"\r\n [class.disabled]=\"disabled\"\r\n>\r\n <input\r\n class=\"s4y-inp-cbx\"\r\n [id]=\"id()\"\r\n [name]=\"name()\"\r\n type=\"checkbox\"\r\n [checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n #checkboxInput\r\n />\r\n <label class=\"cbx\" [for]=\"id()\"\r\n ><span>\r\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </svg>\r\n </span>\r\n @if (label()) {\r\n <span>\r\n {{ label() }}\r\n </span>\r\n }\r\n </label>\r\n</div>\r\n", styles: [":host{display:block;width:max-content}.s4y-checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.s4y-checkbox-wrapper .cbx{margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.s4y-checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0);font-size:1.4rem;color:var(--gray-900)}.s4y-checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:3px;transform:scale(1);vertical-align:middle;border:1px solid #9098a9;transition:all .2s ease}.s4y-checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.s4y-checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--primary-color);display:block;transform:scale(0);opacity:1;border-radius:50%}.s4y-checkbox-wrapper .cbx span:last-child{padding-left:8px}.s4y-checkbox-wrapper .cbx:hover span:first-child{border-color:var(--primary-color)}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child{background:var(--primary-color);border-color:var(--primary-color);animation:wave-46 .4s ease}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave-46{50%{transform:scale(.9)}}.s4y-checkbox-wrapper.disabled .cbx:hover span:first-child{background-color:var(--gray-400)}.s4y-checkbox-wrapper.disabled .s4y-inp-cbx:checked+.cbx span:first-child{background-color:var(--gray-400);border-color:var(--gray-400)}\n"] }]
|
|
1443
1441
|
}] });
|
|
1444
1442
|
|
|
1445
1443
|
const selectAnimation = trigger('selectAnimation', [
|