s4y-ui 3.0.3 → 3.0.4

package/fesm2022/s4y-ui.mjs

@@ -1389,57 +1389,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     ], template: "<label class=\"s4y-switch\" [class]=\"size()\">\r\n  <input\r\n    (input)=\"onToggle()\"\r\n    type=\"checkbox\"\r\n    [checked]=\"model()\"\r\n    [disabled]=\"disabled() || disabledWithReactives\"\r\n  />\r\n  <span class=\"slider round\"></span>\r\n</label>\r\n", styles: ["@charset \"UTF-8\";.s4y-switch{position:relative;display:inline-block;width:60px;height:34px}.s4y-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--primary-color)}input:focus+.slider{box-shadow:0 0 1px var(--primary-color)}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.s4y-switch.small{width:34px;height:18px}.s4y-switch.small .slider:before{position:absolute;content:\"\";height:12px;width:12px;left:4px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.s4y-switch.small input:checked+.slider:before{-webkit-transform:translateX(15px);-ms-transform:translateX(15px);transform:translate(15px)}.s4y-switch.medium{width:48px;height:24px}.s4y-switch.medium .slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.s4y-switch.medium input:checked+.slider:before{-webkit-transform:translateX(24px);-ms-transform:translateX(24px);transform:translate(24px)}.s4y-switch.large{width:60px;height:34px}.s4y-switch.large .slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.s4y-switch.large input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}input:disabled+.slider{cursor:not-allowed;background-color:#bdbdbd}input:disabled+.slider:before{background-color:#fff}\n"] }]
         }] });
 
-class CheckboxComponent {
-    id = input.required();
-    name = input.required();
-    label = input();
-    disabled = false;
-    value = false;
-    onChange = (value) => { };
-    onTouched = () => { };
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    onToggleCheckbox(checked) {
-        if (this.disabled)
-            return;
-        // Evita log duplicado
-        if (this.value !== checked) {
-            this.value = checked;
-            this.onChange(this.value);
-            this.onTouched();
-            // console.log('onToggleCheckbox:', this.value); // <-- imprime 1x
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CheckboxComponent),
-                multi: true,
-            },
-        ], 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 }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 's4y-checkbox', imports: [FormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CheckboxComponent),
-                            multi: true,
-                        },
-                    ], 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"] }]
-        }] });
-
 const selectAnimation = trigger('selectAnimation', [
     transition(':enter', [
         query('.s4y-select-options', group([
@@ -2677,6 +2626,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             args: [{ selector: 's4y-loading-modal', imports: [], encapsulation: ViewEncapsulation.None, animations: [loadingAnimation], template: "@if (loadingModalService.isLoading()) {\r\n  <div class=\"s4y-loading-modal-wrapper\" @loadingAnimation>\r\n    <div class=\"s4y-loading-modal-item\"></div>\r\n    <p class=\"s4y-loading-modal-item-infor\">\r\n      {{ messageInfor() }} <span>{{ dots }}</span>\r\n    </p>\r\n  </div>\r\n}\r\n", styles: [".s4y-loading-modal-wrapper{background-color:#000000b3;position:fixed;top:0;left:0;width:100dvw;height:100dvh;z-index:var(--z-index-loader);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-direction:column}.s4y-loading-modal-wrapper .s4y-loading-modal-item-infor{color:var(--gray-100);margin-top:2rem;max-width:60rem;text-align:center}.s4y-loading-modal-wrapper .s4y-loading-modal-item{width:48px;height:48px;border-radius:50%;position:relative;animation:rotate 1s linear infinite}.s4y-loading-modal-wrapper .s4y-loading-modal-item:before{content:\"\";box-sizing:border-box;position:absolute;inset:0;border-radius:50%;border:5px solid #fff;animation:prixClipFix 2s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes prixClipFix{0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}to{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}}\n"] }]
         }] });
 
+class CheckboxComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: CheckboxComponent, isStandalone: true, selector: "input[s4yCheckbox][type=\"checkbox\"]", host: { attributes: { "role": "checkbox" }, properties: { "attr.aria-checked": "checked" } }, ngImport: i0, template: "", styles: [":host{position:relative;display:inline-block;vertical-align:middle;width:2rem;height:2rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;background:transparent;outline:none}:host:before{content:\"\";position:absolute;top:2.5px;left:7px;width:6px;height:12px;z-index:2;border:solid white;border-width:0 3px 3px 0;transform:rotate(40deg);background-color:transparent;opacity:0;transform:rotate(40deg) scale(0);transition:transform .2s ease,opacity .2s ease;cursor:pointer}:host:after{content:\"\";position:absolute;top:0;width:2rem;height:2rem;border:1px solid var(--gray-500);border-radius:3px;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .3s ease}:host:checked:after{background:var(--primary-color);border-color:var(--primary-color);animation:pulse-zoom .3s ease}:host:checked:before{opacity:1;transform:rotate(40deg) scale(1)}@keyframes pulse-zoom{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}:host:disabled:after{opacity:.5;cursor:not-allowed}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[s4yCheckbox][type="checkbox"]', imports: [], host: {
+                        '[attr.aria-checked]': 'checked',
+                        role: 'checkbox',
+                    }, template: "", styles: [":host{position:relative;display:inline-block;vertical-align:middle;width:2rem;height:2rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;background:transparent;outline:none}:host:before{content:\"\";position:absolute;top:2.5px;left:7px;width:6px;height:12px;z-index:2;border:solid white;border-width:0 3px 3px 0;transform:rotate(40deg);background-color:transparent;opacity:0;transform:rotate(40deg) scale(0);transition:transform .2s ease,opacity .2s ease;cursor:pointer}:host:after{content:\"\";position:absolute;top:0;width:2rem;height:2rem;border:1px solid var(--gray-500);border-radius:3px;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .3s ease}:host:checked:after{background:var(--primary-color);border-color:var(--primary-color);animation:pulse-zoom .3s ease}:host:checked:before{opacity:1;transform:rotate(40deg) scale(1)}@keyframes pulse-zoom{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}:host:disabled:after{opacity:.5;cursor:not-allowed}\n"] }]
+        }] });
+
 /*
  * Public API Surface of s4y-components
  */