npm - @seniorsistemas/angular-components - Versions diffs - 19.9.7 → 19.9.8-develop-dbc2f1b4 - Mend

@seniorsistemas/angular-components 19.9.7 → 19.9.8-develop-dbc2f1b4

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.

Files changed (162) hide show

package/fesm2022/seniorsistemas-angular-components-button.mjs CHANGED Viewed

@@ -165,13 +165,13 @@ class ButtonComponent {
         this.isMenuOpen = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "s-button", inputs: { id: "id", label: "label", tooltip: "tooltip", tooltipPosition: "tooltipPosition", iconClass: "iconClass", rightIconClass: "rightIconClass", caret: "caret", styleClass: "styleClass", baseZIndex: "baseZIndex", disabled: "disabled", auxiliary: "auxiliary", type: "type", priority: "priority", menuOptions: "menuOptions", size: "size", slide: "slide", animation: "animation", badge: "badge", iconColor: "iconColor", menuAriaLabel: "menuAriaLabel", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { properties: { "class.s-button-with-badge": "!!badge", "style.min-width": "this.minWidth" } }, usesOnChanges: true, ngImport: i0, template: "<button\n    [id]=\"id\"\n    [type]=\"type\"\n    [class]=\"styleClass\"\n    class=\"inline-flex items-center justify-center border border-solid cursor-pointer font-open-sans text-sm max-w-full min-w-[40px] outline-none overflow-visible py-[5px] px-[10px] relative no-underline normal-case transition-[background-color,border-color,color] duration-200 ease-out text-grayscale-0 disabled:cursor-text disabled:opacity-50\"\n    [ngClass]=\"{\n        'rounded-medium': !auxiliary,\n        'rounded-[20px]': auxiliary && !(iconClass && !label && !menuOptions.length),\n        'rounded-[50%]': auxiliary && !!(iconClass && !label && !menuOptions.length),\n        'h-[35px]': size !== 'small',\n        'h-[25px]': size === 'small',\n        'max-w-6 max-h-6 min-w-6': size === 'small' && !!(iconClass && !label && !menuOptions.length),\n        's-button-auxiliary': auxiliary,\n        's-button-with-icon': !!iconClass,\n        's-button-with-text': !!label,\n        's-button-only-icon': !!(iconClass && !label && !menuOptions.length),\n        's-button-empty': !iconClass && !label,\n        's-button-size-default': size === 'default',\n        's-button-size-small': size === 'small',\n        's-button-priority-default': priority === 'default',\n        's-button-priority-primary': priority === 'primary',\n        's-button-priority-secondary': priority === 'secondary',\n        's-button-priority-link': priority === 'link',\n        's-button-priority-danger': priority === 'danger',\n        's-button-multiple': (caret && menuOptions.length) || !!rightIconClass,\n        's-button--slide': validateSlideButton(),\n        's-button--rotate-animation': isRotateAnimation(),\n    }\"\n    sTieredMenu\n    [items]=\"menuOptions\"\n    [ariaLabel]=\"menuAriaLabel\"\n    [attr.aria-haspopup]=\"menuOptions.length ? 'menu' : null\"\n    [attr.aria-expanded]=\"menuOptions.length ? isMenuOpen : null\"\n    [attr.aria-label]=\"ariaLabel\"\n    [disabled]=\"disabled\"\n    [sTooltip]=\"tooltip\"\n    [tooltipPosition]=\"tooltipPosition\"\n    (tieredMenuOpened)=\"onTieredMenuOpened()\"\n    (tieredMenuClosed)=\"onTieredMenuClosed()\"\n    (click)=\"clicked.emit($event)\"\n>\n    @if (iconClass) {\n        <span\n            [class]=\"iconClass\"\n            [ngClass]=\"{\n                's-button-icon inline-flex items-center justify-center': true,\n                'mr-[10px]': !label && menuOptions.length,\n            }\"\n            [ngStyle]=\"{ color: iconColor }\"\n            aria-hidden=\"true\"\n        >\n        </span>\n    }\n    @if (label) {\n        <span\n            class=\"s-button-text block overflow-hidden text-ellipsis whitespace-nowrap\"\n            [ngClass]=\"{\n                'mr-[10px]': !!rightIconClass || menuOptions.length,\n                'ml-[10px]': !!iconClass,\n            }\"\n        >\n            {{ label }}\n        </span>\n    }\n    <ng-content></ng-content>\n    @if (rightIconClass) {\n        <span\n            [class]=\"rightIconClass\"\n            [ngClass]=\"{ 's-button-right-icon inline-flex items-center justify-center': true }\"\n            [ngStyle]=\"{ color: iconColor }\"\n            aria-hidden=\"true\"\n        >\n        </span>\n    }\n    @if ((caret && menuOptions.length) || (menuOptions && menuOptions.length)) {\n        <span\n            class=\"menu-options-icon fa fa-fw fa-caret-down\"\n            aria-hidden=\"true\"\n        >\n        </span>\n    }\n</button>\n@if (badge) {\n    <div class=\"z-[99] relative right-[15px] bottom-[16px]\">\n        <s-badge\n            [color]=\"badge.color\"\n            [text]=\"badge.text\"\n            [iconClass]=\"badge.iconClass\"\n        >\n        </s-badge>\n    </div>\n}\n\n", styles: [":host{display:inline-flex;position:relative}:host.s-button-with-badge{margin-right:-15px}button.s-button-priority-primary{background-color:#428bca;border-color:#428bca}button.s-button-priority-primary .menu-options-icon{color:#fff}button.s-button-priority-primary:hover:not(:disabled){background-color:#2b6597}button.s-button-priority-primary:focus{background-color:#2b6597;border-color:#22dce6}button.s-button-priority-primary:active:not(:disabled),button.s-button-priority-primary.s-button-active:not(:disabled){background-color:#255783;border-color:#255783}button.s-button-priority-secondary{background-color:#7892a1;border-color:#7892a1}button.s-button-priority-secondary .menu-options-icon{color:#fff}button.s-button-priority-secondary:hover:not(:disabled){background-color:#546b79}button.s-button-priority-secondary:focus{background-color:#546b79;border-color:#22dce6}button.s-button-priority-secondary:active:not(:disabled),button.s-button-priority-secondary.s-button-active:not(:disabled){background-color:#4a5e6a;border-color:#4a5e6a}button.s-button-priority-default{background-color:#fff;border-color:#ccc;color:#333}button.s-button-priority-default .menu-options-icon{color:#333}button.s-button-priority-default:hover:not(:disabled){background-color:#d9d9d9}button.s-button-priority-default:focus{background-color:#d9d9d9;border-color:#22dce6}button.s-button-priority-default:active:not(:disabled),button.s-button-priority-default.s-button-active:not(:disabled){background-color:#ccc;border-color:#ccc}button.s-button-priority-danger{background-color:#9c3a3a;border-color:#9c3a3a}button.s-button-priority-danger .menu-options-icon{color:#fff}button.s-button-priority-danger:hover:not(:disabled){background-color:#642525}button.s-button-priority-danger:focus{background-color:#642525;border-color:#22dce6}button.s-button-priority-danger:active:not(:disabled),button.s-button-priority-danger.s-button-active:not(:disabled){background-color:#521e1e;border-color:#521e1e}button.s-button-priority-link{background-color:transparent;border-color:transparent}button.s-button-priority-link .s-button-icon,button.s-button-priority-link .s-button-right-icon,button.s-button-priority-link .s-button-text,button.s-button-priority-link .s-button-menu-icon{color:#428bca}button.s-button-priority-link:hover:not(:disabled){background-color:transparent}button.s-button-priority-link:hover:not(:disabled) .s-button-icon,button.s-button-priority-link:hover:not(:disabled) .s-button-right-icon,button.s-button-priority-link:hover:not(:disabled) .s-button-text,button.s-button-priority-link:hover:not(:disabled) .s-button-menu-icon{color:#2b6597}button.s-button-priority-link:focus{background-color:transparent;border-color:#22dce6}button.s-button-priority-link:focus .s-button-icon,button.s-button-priority-link:focus .s-button-right-icon,button.s-button-priority-link:focus .s-button-text,button.s-button-priority-link:focus .s-button-menu-icon{color:#2b6597}button.s-button-priority-link:active:not(:disabled),button.s-button-priority-link.s-button-active:not(:disabled){background-color:transparent;border-color:transparent}button.s-button-priority-link:active:not(:disabled) .s-button-icon,button.s-button-priority-link:active:not(:disabled) .s-button-right-icon,button.s-button-priority-link:active:not(:disabled) .s-button-text,button.s-button-priority-link:active:not(:disabled) .s-button-menu-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-right-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-text,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-menu-icon{color:#255783}button.s-button-with-text,button.s-button-with-icon.s-button-multiple{min-width:80px}button.s-button-with-icon.s-button-with-text.s-button-multiple{min-width:100px}button.s-button-multiple.s-button-size-small.s-button-empty{width:25px;min-width:25px}.s-button--slide.s-button-with-text,.s-button--slide.s-button-with-icon.s-button-multiple{min-width:40px}.s-button--slide .s-button-text{opacity:0;position:absolute;width:0}.s-button--slide:hover:not(:disabled) .s-button-text{opacity:1;position:relative;transition:1s ease;width:auto}.s-button--slide:hover:not(:disabled).s-button--rotate-animation .s-button-icon,.s-button--slide:hover:not(:disabled).s-button--rotate-animation .s-button-right-icon{transform:rotate(360deg);transition:1.5s ease}.s-button-active .s-button-menu-icon{transform:rotateX(180deg)}.menu-options-icon{color:#212533}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i1.BadgeComponent, selector: "s-badge", inputs: ["type", "color", "title", "text", "selectable", "iconClass", "iconPosition", "infoSign", "enableTruncateText"], outputs: ["selected"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "directive", type: i2.TieredMenuDirective, selector: "[sTieredMenu]", inputs: ["items", "focusedItem", "triggerEvent", "ariaLabel"], outputs: ["tieredMenuOpened", "tieredMenuClosed"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "s-button", inputs: { id: "id", label: "label", tooltip: "tooltip", tooltipPosition: "tooltipPosition", iconClass: "iconClass", rightIconClass: "rightIconClass", caret: "caret", styleClass: "styleClass", baseZIndex: "baseZIndex", disabled: "disabled", auxiliary: "auxiliary", type: "type", priority: "priority", menuOptions: "menuOptions", size: "size", slide: "slide", animation: "animation", badge: "badge", iconColor: "iconColor", menuAriaLabel: "menuAriaLabel", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { properties: { "class.s-button-with-badge": "!!badge", "style.min-width": "this.minWidth" } }, usesOnChanges: true, ngImport: i0, template: "<button\n    [id]=\"id\"\n    [type]=\"type\"\n    [class]=\"styleClass\"\n    class=\"inline-flex items-center justify-center border border-solid cursor-pointer font-open-sans text-sm max-w-full min-w-[40px] outline-none overflow-visible py-[5px] px-[10px] relative no-underline normal-case transition-[background-color,border-color,color] duration-200 ease-out text-grayscale-0 disabled:cursor-text disabled:opacity-50\"\n    [ngClass]=\"{\n        'rounded-medium': !auxiliary,\n        'rounded-[20px]': auxiliary && !(iconClass && !label && !menuOptions.length),\n        'rounded-[50%]': auxiliary && !!(iconClass && !label && !menuOptions.length),\n        'h-[35px]': size !== 'small',\n        'h-[25px]': size === 'small',\n        'max-w-6 max-h-6 min-w-6': size === 'small' && !!(iconClass && !label && !menuOptions.length),\n        's-button-auxiliary': auxiliary,\n        's-button-with-icon': !!iconClass,\n        's-button-with-text': !!label,\n        's-button-only-icon': !!(iconClass && !label && !menuOptions.length),\n        's-button-empty': !iconClass && !label,\n        's-button-size-default': size === 'default',\n        's-button-size-small': size === 'small',\n        's-button-priority-default': priority === 'default',\n        's-button-priority-primary': priority === 'primary',\n        's-button-priority-secondary': priority === 'secondary',\n        's-button-priority-link': priority === 'link',\n        's-button-priority-danger': priority === 'danger',\n        's-button-multiple': (caret && menuOptions.length) || !!rightIconClass,\n        's-button--slide': validateSlideButton(),\n        's-button--rotate-animation': isRotateAnimation(),\n    }\"\n    sTieredMenu\n    [items]=\"menuOptions\"\n    [ariaLabel]=\"menuAriaLabel\"\n    [attr.aria-haspopup]=\"menuOptions.length ? 'menu' : null\"\n    [attr.aria-expanded]=\"menuOptions.length ? isMenuOpen : null\"\n    [attr.aria-label]=\"ariaLabel\"\n    [disabled]=\"disabled\"\n    [sTooltip]=\"tooltip\"\n    [tooltipPosition]=\"tooltipPosition\"\n    (tieredMenuOpened)=\"onTieredMenuOpened()\"\n    (tieredMenuClosed)=\"onTieredMenuClosed()\"\n    (click)=\"clicked.emit($event)\"\n>\n    @if (iconClass) {\n        <span\n            [class]=\"iconClass\"\n            [ngClass]=\"{\n                's-button-icon inline-flex items-center justify-center': true,\n                'mr-[10px]': !label && menuOptions.length,\n            }\"\n            [ngStyle]=\"{ color: iconColor }\"\n            aria-hidden=\"true\"\n        >\n        </span>\n    }\n    @if (label) {\n        <span\n            class=\"s-button-text block overflow-hidden text-ellipsis whitespace-nowrap\"\n            [ngClass]=\"{\n                'mr-[10px]': !!rightIconClass || menuOptions.length,\n                'ml-[10px]': !!iconClass,\n            }\"\n        >\n            {{ label }}\n        </span>\n    }\n    <ng-content></ng-content>\n    @if (rightIconClass) {\n        <span\n            [class]=\"rightIconClass\"\n            [ngClass]=\"{ 's-button-right-icon inline-flex items-center justify-center': true }\"\n            [ngStyle]=\"{ color: iconColor }\"\n            aria-hidden=\"true\"\n        >\n        </span>\n    }\n    @if ((caret && menuOptions.length) || (menuOptions && menuOptions.length)) {\n        <span\n            class=\"menu-options-icon fa fa-fw fa-caret-down\"\n            aria-hidden=\"true\"\n        >\n        </span>\n    }\n</button>\n@if (badge) {\n    <div class=\"z-[99] relative right-[15px] bottom-[16px]\">\n        <s-badge\n            [color]=\"badge.color\"\n            [text]=\"badge.text\"\n            [iconClass]=\"badge.iconClass\"\n        >\n        </s-badge>\n    </div>\n}\n\n", styles: [":host{display:inline-flex;position:relative}:host.s-button-with-badge{margin-right:-15px}button:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}button.s-button-priority-primary{background-color:#428bca;border-color:#428bca}button.s-button-priority-primary .menu-options-icon{color:#fff}button.s-button-priority-primary:hover:not(:disabled){background-color:#2b6597}button.s-button-priority-primary:active:not(:disabled),button.s-button-priority-primary.s-button-active:not(:disabled){background-color:#255783;border-color:#255783}button.s-button-priority-secondary{background-color:#7892a1;border-color:#7892a1}button.s-button-priority-secondary .menu-options-icon{color:#fff}button.s-button-priority-secondary:hover:not(:disabled){background-color:#546b79}button.s-button-priority-secondary:active:not(:disabled),button.s-button-priority-secondary.s-button-active:not(:disabled){background-color:#4a5e6a;border-color:#4a5e6a}button.s-button-priority-default{background-color:#fff;border-color:#ccc;color:#333}button.s-button-priority-default .menu-options-icon{color:#333}button.s-button-priority-default:hover:not(:disabled){background-color:#d9d9d9}button.s-button-priority-default:active:not(:disabled),button.s-button-priority-default.s-button-active:not(:disabled){background-color:#ccc;border-color:#ccc}button.s-button-priority-danger{background-color:#9c3a3a;border-color:#9c3a3a}button.s-button-priority-danger .menu-options-icon{color:#fff}button.s-button-priority-danger:hover:not(:disabled){background-color:#642525}button.s-button-priority-danger:active:not(:disabled),button.s-button-priority-danger.s-button-active:not(:disabled){background-color:#521e1e;border-color:#521e1e}button.s-button-priority-link{background-color:transparent;border-color:transparent}button.s-button-priority-link .s-button-icon,button.s-button-priority-link .s-button-right-icon,button.s-button-priority-link .s-button-text,button.s-button-priority-link .s-button-menu-icon{color:#428bca}button.s-button-priority-link:hover:not(:disabled){background-color:transparent}button.s-button-priority-link:hover:not(:disabled) .s-button-icon,button.s-button-priority-link:hover:not(:disabled) .s-button-right-icon,button.s-button-priority-link:hover:not(:disabled) .s-button-text,button.s-button-priority-link:hover:not(:disabled) .s-button-menu-icon{color:#2b6597}button.s-button-priority-link:focus-visible .s-button-icon,button.s-button-priority-link:focus-visible .s-button-right-icon,button.s-button-priority-link:focus-visible .s-button-text,button.s-button-priority-link:focus-visible .s-button-menu-icon{color:#2b6597}button.s-button-priority-link:active:not(:disabled),button.s-button-priority-link.s-button-active:not(:disabled){background-color:transparent;border-color:transparent}button.s-button-priority-link:active:not(:disabled) .s-button-icon,button.s-button-priority-link:active:not(:disabled) .s-button-right-icon,button.s-button-priority-link:active:not(:disabled) .s-button-text,button.s-button-priority-link:active:not(:disabled) .s-button-menu-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-right-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-text,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-menu-icon{color:#255783}button.s-button-with-text,button.s-button-with-icon.s-button-multiple{min-width:80px}button.s-button-with-icon.s-button-with-text.s-button-multiple{min-width:100px}button.s-button-multiple.s-button-size-small.s-button-empty{width:25px;min-width:25px}.s-button--slide.s-button-with-text,.s-button--slide.s-button-with-icon.s-button-multiple{min-width:40px}.s-button--slide .s-button-text{opacity:0;position:absolute;width:0}.s-button--slide:hover:not(:disabled) .s-button-text{opacity:1;position:relative;transition:1s ease;width:auto}.s-button--slide:hover:not(:disabled).s-button--rotate-animation .s-button-icon,.s-button--slide:hover:not(:disabled).s-button--rotate-animation .s-button-right-icon{transform:rotate(360deg);transition:1.5s ease}.s-button-active .s-button-menu-icon{transform:rotateX(180deg)}.menu-options-icon{color:#212533}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i1.BadgeComponent, selector: "s-badge", inputs: ["type", "color", "title", "text", "selectable", "iconClass", "iconPosition", "infoSign", "enableTruncateText"], outputs: ["selected"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "directive", type: i2.TieredMenuDirective, selector: "[sTieredMenu]", inputs: ["items", "focusedItem", "triggerEvent", "ariaLabel"], outputs: ["tieredMenuOpened", "tieredMenuClosed"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 's-button', host: {
                         '[class.s-button-with-badge]': '!!badge',
-                    }, standalone: true, imports: [NgClass, NgStyle, BadgeModule, TieredMenuModule, TooltipModule], template: "<button\n    [id]=\"id\"\n    [type]=\"type\"\n    [class]=\"styleClass\"\n    class=\"inline-flex items-center justify-center border border-solid cursor-pointer font-open-sans text-sm max-w-full min-w-[40px] outline-none overflow-visible py-[5px] px-[10px] relative no-underline normal-case transition-[background-color,border-color,color] duration-200 ease-out text-grayscale-0 disabled:cursor-text disabled:opacity-50\"\n    [ngClass]=\"{\n        'rounded-medium': !auxiliary,\n        'rounded-[20px]': auxiliary && !(iconClass && !label && !menuOptions.length),\n        'rounded-[50%]': auxiliary && !!(iconClass && !label && !menuOptions.length),\n        'h-[35px]': size !== 'small',\n        'h-[25px]': size === 'small',\n        'max-w-6 max-h-6 min-w-6': size === 'small' && !!(iconClass && !label && !menuOptions.length),\n        's-button-auxiliary': auxiliary,\n        's-button-with-icon': !!iconClass,\n        's-button-with-text': !!label,\n        's-button-only-icon': !!(iconClass && !label && !menuOptions.length),\n        's-button-empty': !iconClass && !label,\n        's-button-size-default': size === 'default',\n        's-button-size-small': size === 'small',\n        's-button-priority-default': priority === 'default',\n        's-button-priority-primary': priority === 'primary',\n        's-button-priority-secondary': priority === 'secondary',\n        's-button-priority-link': priority === 'link',\n        's-button-priority-danger': priority === 'danger',\n        's-button-multiple': (caret && menuOptions.length) || !!rightIconClass,\n        's-button--slide': validateSlideButton(),\n        's-button--rotate-animation': isRotateAnimation(),\n    }\"\n    sTieredMenu\n    [items]=\"menuOptions\"\n    [ariaLabel]=\"menuAriaLabel\"\n    [attr.aria-haspopup]=\"menuOptions.length ? 'menu' : null\"\n    [attr.aria-expanded]=\"menuOptions.length ? isMenuOpen : null\"\n    [attr.aria-label]=\"ariaLabel\"\n    [disabled]=\"disabled\"\n    [sTooltip]=\"tooltip\"\n    [tooltipPosition]=\"tooltipPosition\"\n    (tieredMenuOpened)=\"onTieredMenuOpened()\"\n    (tieredMenuClosed)=\"onTieredMenuClosed()\"\n    (click)=\"clicked.emit($event)\"\n>\n    @if (iconClass) {\n        <span\n            [class]=\"iconClass\"\n            [ngClass]=\"{\n                's-button-icon inline-flex items-center justify-center': true,\n                'mr-[10px]': !label && menuOptions.length,\n            }\"\n            [ngStyle]=\"{ color: iconColor }\"\n            aria-hidden=\"true\"\n        >\n        </span>\n    }\n    @if (label) {\n        <span\n            class=\"s-button-text block overflow-hidden text-ellipsis whitespace-nowrap\"\n            [ngClass]=\"{\n                'mr-[10px]': !!rightIconClass || menuOptions.length,\n                'ml-[10px]': !!iconClass,\n            }\"\n        >\n            {{ label }}\n        </span>\n    }\n    <ng-content></ng-content>\n    @if (rightIconClass) {\n        <span\n            [class]=\"rightIconClass\"\n            [ngClass]=\"{ 's-button-right-icon inline-flex items-center justify-center': true }\"\n            [ngStyle]=\"{ color: iconColor }\"\n            aria-hidden=\"true\"\n        >\n        </span>\n    }\n    @if ((caret && menuOptions.length) || (menuOptions && menuOptions.length)) {\n        <span\n            class=\"menu-options-icon fa fa-fw fa-caret-down\"\n            aria-hidden=\"true\"\n        >\n        </span>\n    }\n</button>\n@if (badge) {\n    <div class=\"z-[99] relative right-[15px] bottom-[16px]\">\n        <s-badge\n            [color]=\"badge.color\"\n            [text]=\"badge.text\"\n            [iconClass]=\"badge.iconClass\"\n        >\n        </s-badge>\n    </div>\n}\n\n", styles: [":host{display:inline-flex;position:relative}:host.s-button-with-badge{margin-right:-15px}button.s-button-priority-primary{background-color:#428bca;border-color:#428bca}button.s-button-priority-primary .menu-options-icon{color:#fff}button.s-button-priority-primary:hover:not(:disabled){background-color:#2b6597}button.s-button-priority-primary:focus{background-color:#2b6597;border-color:#22dce6}button.s-button-priority-primary:active:not(:disabled),button.s-button-priority-primary.s-button-active:not(:disabled){background-color:#255783;border-color:#255783}button.s-button-priority-secondary{background-color:#7892a1;border-color:#7892a1}button.s-button-priority-secondary .menu-options-icon{color:#fff}button.s-button-priority-secondary:hover:not(:disabled){background-color:#546b79}button.s-button-priority-secondary:focus{background-color:#546b79;border-color:#22dce6}button.s-button-priority-secondary:active:not(:disabled),button.s-button-priority-secondary.s-button-active:not(:disabled){background-color:#4a5e6a;border-color:#4a5e6a}button.s-button-priority-default{background-color:#fff;border-color:#ccc;color:#333}button.s-button-priority-default .menu-options-icon{color:#333}button.s-button-priority-default:hover:not(:disabled){background-color:#d9d9d9}button.s-button-priority-default:focus{background-color:#d9d9d9;border-color:#22dce6}button.s-button-priority-default:active:not(:disabled),button.s-button-priority-default.s-button-active:not(:disabled){background-color:#ccc;border-color:#ccc}button.s-button-priority-danger{background-color:#9c3a3a;border-color:#9c3a3a}button.s-button-priority-danger .menu-options-icon{color:#fff}button.s-button-priority-danger:hover:not(:disabled){background-color:#642525}button.s-button-priority-danger:focus{background-color:#642525;border-color:#22dce6}button.s-button-priority-danger:active:not(:disabled),button.s-button-priority-danger.s-button-active:not(:disabled){background-color:#521e1e;border-color:#521e1e}button.s-button-priority-link{background-color:transparent;border-color:transparent}button.s-button-priority-link .s-button-icon,button.s-button-priority-link .s-button-right-icon,button.s-button-priority-link .s-button-text,button.s-button-priority-link .s-button-menu-icon{color:#428bca}button.s-button-priority-link:hover:not(:disabled){background-color:transparent}button.s-button-priority-link:hover:not(:disabled) .s-button-icon,button.s-button-priority-link:hover:not(:disabled) .s-button-right-icon,button.s-button-priority-link:hover:not(:disabled) .s-button-text,button.s-button-priority-link:hover:not(:disabled) .s-button-menu-icon{color:#2b6597}button.s-button-priority-link:focus{background-color:transparent;border-color:#22dce6}button.s-button-priority-link:focus .s-button-icon,button.s-button-priority-link:focus .s-button-right-icon,button.s-button-priority-link:focus .s-button-text,button.s-button-priority-link:focus .s-button-menu-icon{color:#2b6597}button.s-button-priority-link:active:not(:disabled),button.s-button-priority-link.s-button-active:not(:disabled){background-color:transparent;border-color:transparent}button.s-button-priority-link:active:not(:disabled) .s-button-icon,button.s-button-priority-link:active:not(:disabled) .s-button-right-icon,button.s-button-priority-link:active:not(:disabled) .s-button-text,button.s-button-priority-link:active:not(:disabled) .s-button-menu-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-right-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-text,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-menu-icon{color:#255783}button.s-button-with-text,button.s-button-with-icon.s-button-multiple{min-width:80px}button.s-button-with-icon.s-button-with-text.s-button-multiple{min-width:100px}button.s-button-multiple.s-button-size-small.s-button-empty{width:25px;min-width:25px}.s-button--slide.s-button-with-text,.s-button--slide.s-button-with-icon.s-button-multiple{min-width:40px}.s-button--slide .s-button-text{opacity:0;position:absolute;width:0}.s-button--slide:hover:not(:disabled) .s-button-text{opacity:1;position:relative;transition:1s ease;width:auto}.s-button--slide:hover:not(:disabled).s-button--rotate-animation .s-button-icon,.s-button--slide:hover:not(:disabled).s-button--rotate-animation .s-button-right-icon{transform:rotate(360deg);transition:1.5s ease}.s-button-active .s-button-menu-icon{transform:rotateX(180deg)}.menu-options-icon{color:#212533}\n"] }]
+                    }, standalone: true, imports: [NgClass, NgStyle, BadgeModule, TieredMenuModule, TooltipModule], template: "<button\n    [id]=\"id\"\n    [type]=\"type\"\n    [class]=\"styleClass\"\n    class=\"inline-flex items-center justify-center border border-solid cursor-pointer font-open-sans text-sm max-w-full min-w-[40px] outline-none overflow-visible py-[5px] px-[10px] relative no-underline normal-case transition-[background-color,border-color,color] duration-200 ease-out text-grayscale-0 disabled:cursor-text disabled:opacity-50\"\n    [ngClass]=\"{\n        'rounded-medium': !auxiliary,\n        'rounded-[20px]': auxiliary && !(iconClass && !label && !menuOptions.length),\n        'rounded-[50%]': auxiliary && !!(iconClass && !label && !menuOptions.length),\n        'h-[35px]': size !== 'small',\n        'h-[25px]': size === 'small',\n        'max-w-6 max-h-6 min-w-6': size === 'small' && !!(iconClass && !label && !menuOptions.length),\n        's-button-auxiliary': auxiliary,\n        's-button-with-icon': !!iconClass,\n        's-button-with-text': !!label,\n        's-button-only-icon': !!(iconClass && !label && !menuOptions.length),\n        's-button-empty': !iconClass && !label,\n        's-button-size-default': size === 'default',\n        's-button-size-small': size === 'small',\n        's-button-priority-default': priority === 'default',\n        's-button-priority-primary': priority === 'primary',\n        's-button-priority-secondary': priority === 'secondary',\n        's-button-priority-link': priority === 'link',\n        's-button-priority-danger': priority === 'danger',\n        's-button-multiple': (caret && menuOptions.length) || !!rightIconClass,\n        's-button--slide': validateSlideButton(),\n        's-button--rotate-animation': isRotateAnimation(),\n    }\"\n    sTieredMenu\n    [items]=\"menuOptions\"\n    [ariaLabel]=\"menuAriaLabel\"\n    [attr.aria-haspopup]=\"menuOptions.length ? 'menu' : null\"\n    [attr.aria-expanded]=\"menuOptions.length ? isMenuOpen : null\"\n    [attr.aria-label]=\"ariaLabel\"\n    [disabled]=\"disabled\"\n    [sTooltip]=\"tooltip\"\n    [tooltipPosition]=\"tooltipPosition\"\n    (tieredMenuOpened)=\"onTieredMenuOpened()\"\n    (tieredMenuClosed)=\"onTieredMenuClosed()\"\n    (click)=\"clicked.emit($event)\"\n>\n    @if (iconClass) {\n        <span\n            [class]=\"iconClass\"\n            [ngClass]=\"{\n                's-button-icon inline-flex items-center justify-center': true,\n                'mr-[10px]': !label && menuOptions.length,\n            }\"\n            [ngStyle]=\"{ color: iconColor }\"\n            aria-hidden=\"true\"\n        >\n        </span>\n    }\n    @if (label) {\n        <span\n            class=\"s-button-text block overflow-hidden text-ellipsis whitespace-nowrap\"\n            [ngClass]=\"{\n                'mr-[10px]': !!rightIconClass || menuOptions.length,\n                'ml-[10px]': !!iconClass,\n            }\"\n        >\n            {{ label }}\n        </span>\n    }\n    <ng-content></ng-content>\n    @if (rightIconClass) {\n        <span\n            [class]=\"rightIconClass\"\n            [ngClass]=\"{ 's-button-right-icon inline-flex items-center justify-center': true }\"\n            [ngStyle]=\"{ color: iconColor }\"\n            aria-hidden=\"true\"\n        >\n        </span>\n    }\n    @if ((caret && menuOptions.length) || (menuOptions && menuOptions.length)) {\n        <span\n            class=\"menu-options-icon fa fa-fw fa-caret-down\"\n            aria-hidden=\"true\"\n        >\n        </span>\n    }\n</button>\n@if (badge) {\n    <div class=\"z-[99] relative right-[15px] bottom-[16px]\">\n        <s-badge\n            [color]=\"badge.color\"\n            [text]=\"badge.text\"\n            [iconClass]=\"badge.iconClass\"\n        >\n        </s-badge>\n    </div>\n}\n\n", styles: [":host{display:inline-flex;position:relative}:host.s-button-with-badge{margin-right:-15px}button:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}button.s-button-priority-primary{background-color:#428bca;border-color:#428bca}button.s-button-priority-primary .menu-options-icon{color:#fff}button.s-button-priority-primary:hover:not(:disabled){background-color:#2b6597}button.s-button-priority-primary:active:not(:disabled),button.s-button-priority-primary.s-button-active:not(:disabled){background-color:#255783;border-color:#255783}button.s-button-priority-secondary{background-color:#7892a1;border-color:#7892a1}button.s-button-priority-secondary .menu-options-icon{color:#fff}button.s-button-priority-secondary:hover:not(:disabled){background-color:#546b79}button.s-button-priority-secondary:active:not(:disabled),button.s-button-priority-secondary.s-button-active:not(:disabled){background-color:#4a5e6a;border-color:#4a5e6a}button.s-button-priority-default{background-color:#fff;border-color:#ccc;color:#333}button.s-button-priority-default .menu-options-icon{color:#333}button.s-button-priority-default:hover:not(:disabled){background-color:#d9d9d9}button.s-button-priority-default:active:not(:disabled),button.s-button-priority-default.s-button-active:not(:disabled){background-color:#ccc;border-color:#ccc}button.s-button-priority-danger{background-color:#9c3a3a;border-color:#9c3a3a}button.s-button-priority-danger .menu-options-icon{color:#fff}button.s-button-priority-danger:hover:not(:disabled){background-color:#642525}button.s-button-priority-danger:active:not(:disabled),button.s-button-priority-danger.s-button-active:not(:disabled){background-color:#521e1e;border-color:#521e1e}button.s-button-priority-link{background-color:transparent;border-color:transparent}button.s-button-priority-link .s-button-icon,button.s-button-priority-link .s-button-right-icon,button.s-button-priority-link .s-button-text,button.s-button-priority-link .s-button-menu-icon{color:#428bca}button.s-button-priority-link:hover:not(:disabled){background-color:transparent}button.s-button-priority-link:hover:not(:disabled) .s-button-icon,button.s-button-priority-link:hover:not(:disabled) .s-button-right-icon,button.s-button-priority-link:hover:not(:disabled) .s-button-text,button.s-button-priority-link:hover:not(:disabled) .s-button-menu-icon{color:#2b6597}button.s-button-priority-link:focus-visible .s-button-icon,button.s-button-priority-link:focus-visible .s-button-right-icon,button.s-button-priority-link:focus-visible .s-button-text,button.s-button-priority-link:focus-visible .s-button-menu-icon{color:#2b6597}button.s-button-priority-link:active:not(:disabled),button.s-button-priority-link.s-button-active:not(:disabled){background-color:transparent;border-color:transparent}button.s-button-priority-link:active:not(:disabled) .s-button-icon,button.s-button-priority-link:active:not(:disabled) .s-button-right-icon,button.s-button-priority-link:active:not(:disabled) .s-button-text,button.s-button-priority-link:active:not(:disabled) .s-button-menu-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-right-icon,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-text,button.s-button-priority-link.s-button-active:not(:disabled) .s-button-menu-icon{color:#255783}button.s-button-with-text,button.s-button-with-icon.s-button-multiple{min-width:80px}button.s-button-with-icon.s-button-with-text.s-button-multiple{min-width:100px}button.s-button-multiple.s-button-size-small.s-button-empty{width:25px;min-width:25px}.s-button--slide.s-button-with-text,.s-button--slide.s-button-with-icon.s-button-multiple{min-width:40px}.s-button--slide .s-button-text{opacity:0;position:absolute;width:0}.s-button--slide:hover:not(:disabled) .s-button-text{opacity:1;position:relative;transition:1s ease;width:auto}.s-button--slide:hover:not(:disabled).s-button--rotate-animation .s-button-icon,.s-button--slide:hover:not(:disabled).s-button--rotate-animation .s-button-right-icon{transform:rotate(360deg);transition:1.5s ease}.s-button-active .s-button-menu-icon{transform:rotateX(180deg)}.menu-options-icon{color:#212533}\n"] }]
         }], propDecorators: { minWidth: [{
                 type: HostBinding,
                 args: ['style.min-width']

package/fesm2022/seniorsistemas-angular-components-button.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"seniorsistemas-angular-components-button.mjs","sources":["../../projects/angular-components/button/src/lib/button/button.component.ts","../../projects/angular-components/button/src/lib/button/button.component.html","../../projects/angular-components/button/src/lib/button/button.module.ts","../../projects/angular-components/button/src/seniorsistemas-angular-components-button.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core';\n\nimport { NgClass, NgStyle } from '@angular/common';\nimport { BadgeModule } from '@seniorsistemas/angular-components/badge';\nimport { TieredMenuItemData, TieredMenuModule } from '@seniorsistemas/angular-components/tiered-menu';\nimport { TooltipModule, TooltipPositions } from '@seniorsistemas/angular-components/tooltip';\nimport { randomHash } from '@seniorsistemas/angular-components/utils';\nimport { ButtonAnimations } from './models/button-animations';\nimport { ButtonBadgeConfig } from './models/button-badge-config';\nimport { ButtonPriority } from './models/button-priority';\n\n/*\n @description Componente de botão versátil que suporta ícones, tooltip, menu de opções\n * (tiered menu), badge, animações e diferentes prioridades visuais. Pode ser configurado\n * como botão de ação simples, botão com menu dropdown ou botão deslizante (slide).\n \n @example\n * ```html\n * <s-button\n * label=\"Salvar\"\n * iconClass=\"fas fa-save\"\n * priority=\"primary\"\n * (clicked)=\"onSave()\" />\n * ```\n \n @category Inputs\n /\n@Component({\n selector: 's-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n host: {\n '[class.s-button-with-badge]': '!!badge',\n },\n standalone: true,\n imports: [NgClass, NgStyle, BadgeModule, TieredMenuModule, TooltipModule],\n})\nexport class ButtonComponent implements OnChanges {\n @HostBinding('style.min-width')\n public minWidth = '40px';\n\n /\n @description Identificador único do elemento botão no DOM.\n * Gerado automaticamente se não informado.\n /\n @Input()\n public id? = `s-button-${randomHash()}`;\n\n /\n @description Texto exibido dentro do botão.\n /\n @Input()\n public label?: string;\n\n /\n @description Texto do tooltip exibido ao passar o mouse sobre o botão.\n /\n @Input()\n public tooltip?: string;\n\n /\n @description Posição do tooltip em relação ao botão.\n \n @default 'top'\n /\n @Input()\n public tooltipPosition: TooltipPositions = 'top';\n\n /\n @description Classe de ícone exibida à esquerda do label (ex.: `'fas fa-save'`).\n /\n @Input()\n public iconClass?: string;\n\n /\n @description Classe de ícone exibida à direita do label.\n /\n @Input()\n public rightIconClass?: string;\n\n /\n @description Exibe o ícone de caret (seta) quando o botão possui um menu de opções.\n \n @default true\n /\n @Input()\n public caret = true;\n\n /\n @description Classe CSS adicional aplicada ao elemento `<button>` interno.\n \n @default ''\n /\n @Input()\n public styleClass = '';\n\n /\n @description Z-index base do painel do menu dropdown associado ao botão.\n \n @default 0\n /\n @Input()\n public baseZIndex = 0;\n\n /\n @description Desabilita o botão, impedindo cliques e interação do usuário.\n \n @default false\n /\n @Input()\n public disabled = false;\n\n /\n @description Aplica estilo auxiliar (menos destaque visual) ao botão.\n \n @default false\n /\n @Input()\n public auxiliary = false;\n\n /\n @description Tipo do elemento `<button>` HTML (`'button'`, `'submit'`, `'reset'`).\n \n @default 'button'\n /\n @Input()\n public type? = 'button';\n\n /\n @description Prioridade visual do botão, que determina seu estilo.\n * Aceita `'primary'`, `'default'`, `'danger'`, `'link'`, entre outros.\n \n @default 'primary'\n /\n @Input()\n public priority?: ButtonPriority = 'primary';\n\n /\n @description Lista de itens do menu dropdown exibido ao clicar no caret do botão.\n \n @default []\n /\n @Input()\n public menuOptions: TieredMenuItemData[] = [];\n\n /\n @description Tamanho visual do botão. Aceita `'default'` ou `'small'`.\n \n @default 'default'\n /\n @Input()\n public size?: 'default' \| 'small' = 'default';\n\n /\n @description Habilita o modo slide, que exibe uma animação de deslize ao passar o mouse.\n * Requer `priority` igual a `'default'` ou `'link'` e um `label` definido.\n \n @default false\n /\n @Input()\n public slide = false;\n\n /\n @description Tipo de animação aplicada ao botão (`'rotate'`, `'pulse'`, etc.).\n /\n @Input()\n public animation?: ButtonAnimations;\n\n /\n @description Configuração do badge exibido sobre o botão, com contador ou indicador visual.\n /\n @Input()\n public badge?: ButtonBadgeConfig;\n\n /\n @description Cor aplicada ao ícone do botão, sobrescrevendo a cor padrão do tema.\n /\n @Input()\n public iconColor?: string;\n\n /\n @description Texto alternativo para o menu associado ao botão, utilizado para acessibilidade.\n /\n @Input()\n public menuAriaLabel?: string;\n\n /\n @description Texto alternativo para quando o botão não tiver um texto explicito, utilizado para acessibilidade.\n /\n @Input()\n public ariaLabel?: string;\n\n /\n @description Emitido ao clicar no botão, desde que não esteja desabilitado.\n /\n @Output()\n public clicked: EventEmitter<any> = new EventEmitter();\n\n public isMenuOpen = false;\n\n public validateSlideButton(): boolean {\n return !!(this.slide && (this.priority === 'default' \|\| this.priority === 'link') && this.label?.length);\n }\n\n public ngOnChanges(_: SimpleChanges): void {\n const hasIcon = this.iconClass;\n const hasText = this.label;\n\n const isMultiple = this.menuOptions?.length;\n\n if (hasText \|\| (hasIcon && isMultiple)) {\n this.minWidth = '80px';\n }\n if (hasText && hasIcon && isMultiple) {\n this.minWidth = '100px';\n }\n }\n\n public isRotateAnimation(): boolean {\n return this.animation === 'rotate';\n }\n\n public onTieredMenuOpened(): void {\n this.isMenuOpen = true;\n }\n\n public onTieredMenuClosed(): void {\n this.isMenuOpen = false;\n }\n}\n\n","<button\n [id]=\"id\"\n [type]=\"type\"\n [class]=\"styleClass\"\n class=\"inline-flex items-center justify-center border border-solid cursor-pointer font-open-sans text-sm max-w-full min-w-[40px] outline-none overflow-visible py-[5px] px-[10px] relative no-underline normal-case transition-[background-color,border-color,color] duration-200 ease-out text-grayscale-0 disabled:cursor-text disabled:opacity-50\"\n [ngClass]=\"{\n 'rounded-medium': !auxiliary,\n 'rounded-[20px]': auxiliary && !(iconClass && !label && !menuOptions.length),\n 'rounded-[50%]': auxiliary && !!(iconClass && !label && !menuOptions.length),\n 'h-[35px]': size !== 'small',\n 'h-[25px]': size === 'small',\n 'max-w-6 max-h-6 min-w-6': size === 'small' && !!(iconClass && !label && !menuOptions.length),\n 's-button-auxiliary': auxiliary,\n 's-button-with-icon': !!iconClass,\n 's-button-with-text': !!label,\n 's-button-only-icon': !!(iconClass && !label && !menuOptions.length),\n 's-button-empty': !iconClass && !label,\n 's-button-size-default': size === 'default',\n 's-button-size-small': size === 'small',\n 's-button-priority-default': priority === 'default',\n 's-button-priority-primary': priority === 'primary',\n 's-button-priority-secondary': priority === 'secondary',\n 's-button-priority-link': priority === 'link',\n 's-button-priority-danger': priority === 'danger',\n 's-button-multiple': (caret && menuOptions.length) \|\| !!rightIconClass,\n 's-button--slide': validateSlideButton(),\n 's-button--rotate-animation': isRotateAnimation(),\n }\"\n sTieredMenu\n [items]=\"menuOptions\"\n [ariaLabel]=\"menuAriaLabel\"\n [attr.aria-haspopup]=\"menuOptions.length ? 'menu' : null\"\n [attr.aria-expanded]=\"menuOptions.length ? isMenuOpen : null\"\n [attr.aria-label]=\"ariaLabel\"\n [disabled]=\"disabled\"\n [sTooltip]=\"tooltip\"\n [tooltipPosition]=\"tooltipPosition\"\n (tieredMenuOpened)=\"onTieredMenuOpened()\"\n (tieredMenuClosed)=\"onTieredMenuClosed()\"\n (click)=\"clicked.emit($event)\"\n>\n @if (iconClass) {\n <span\n [class]=\"iconClass\"\n [ngClass]=\"{\n 's-button-icon inline-flex items-center justify-center': true,\n 'mr-[10px]': !label && menuOptions.length,\n }\"\n [ngStyle]=\"{ color: iconColor }\"\n aria-hidden=\"true\"\n >\n </span>\n }\n @if (label) {\n <span\n class=\"s-button-text block overflow-hidden text-ellipsis whitespace-nowrap\"\n [ngClass]=\"{\n 'mr-[10px]': !!rightIconClass \|\| menuOptions.length,\n 'ml-[10px]': !!iconClass,\n }\"\n >\n {{ label }}\n </span>\n }\n <ng-content></ng-content>\n @if (rightIconClass) {\n <span\n [class]=\"rightIconClass\"\n [ngClass]=\"{ 's-button-right-icon inline-flex items-center justify-center': true }\"\n [ngStyle]=\"{ color: iconColor }\"\n aria-hidden=\"true\"\n >\n </span>\n }\n @if ((caret && menuOptions.length) \|\| (menuOptions && menuOptions.length)) {\n <span\n class=\"menu-options-icon fa fa-fw fa-caret-down\"\n aria-hidden=\"true\"\n >\n </span>\n }\n</button>\n@if (badge) {\n <div class=\"z-[99] relative right-[15px] bottom-[16px]\">\n <s-badge\n [color]=\"badge.color\"\n [text]=\"badge.text\"\n [iconClass]=\"badge.iconClass\"\n >\n </s-badge>\n </div>\n}\n\n","import { NgModule } from '@angular/core';\n\nimport { ButtonComponent } from './button.component';\n\n@NgModule({\n imports: [\n ButtonComponent,\n ],\n exports: [ButtonComponent],\n})\nexport class ButtonModule { }\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;AAWA;;;;;;;;;;;;;;;AAeG;MAWU,eAAe,CAAA;IAEjB,QAAQ,GAAG,MAAM,CAAC;AAEzB;;;AAGG;AAEI,IAAA,EAAE,GAAI,CAAA,SAAA,EAAY,UAAU,EAAE,EAAE,CAAC;AAExC;;AAEG;AAEI,IAAA,KAAK,CAAU;AAEtB;;AAEG;AAEI,IAAA,OAAO,CAAU;AAExB;;;;AAIG;IAEI,eAAe,GAAqB,KAAK,CAAC;AAEjD;;AAEG;AAEI,IAAA,SAAS,CAAU;AAE1B;;AAEG;AAEI,IAAA,cAAc,CAAU;AAE/B;;;;AAIG;IAEI,KAAK,GAAG,IAAI,CAAC;AAEpB;;;;AAIG;IAEI,UAAU,GAAG,EAAE,CAAC;AAEvB;;;;AAIG;IAEI,UAAU,GAAG,CAAC,CAAC;AAEtB;;;;AAIG;IAEI,QAAQ,GAAG,KAAK,CAAC;AAExB;;;;AAIG;IAEI,SAAS,GAAG,KAAK,CAAC;AAEzB;;;;AAIG;IAEI,IAAI,GAAI,QAAQ,CAAC;AAExB;;;;;AAKG;IAEI,QAAQ,GAAoB,SAAS,CAAC;AAE7C;;;;AAIG;IAEI,WAAW,GAAyB,EAAE,CAAC;AAE9C;;;;AAIG;IAEI,IAAI,GAAyB,SAAS,CAAC;AAE9C;;;;;AAKG;IAEI,KAAK,GAAG,KAAK,CAAC;AAErB;;AAEG;AAEI,IAAA,SAAS,CAAoB;AAEpC;;AAEG;AAEI,IAAA,KAAK,CAAqB;AAEjC;;AAEG;AAEI,IAAA,SAAS,CAAU;AAE1B;;AAEG;AAEI,IAAA,aAAa,CAAU;AAE9B;;AAEG;AAEI,IAAA,SAAS,CAAU;AAE1B;;AAEG;AAEI,IAAA,OAAO,GAAsB,IAAI,YAAY,EAAE,CAAC;IAEhD,UAAU,GAAG,KAAK,CAAC;IAEnB,mBAAmB,GAAA;QACtB,OAAO,CAAC,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;KAC5G;AAEM,IAAA,WAAW,CAAC,CAAgB,EAAA;AAC/B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC;AAC/B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC;AAE3B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;QAE5C,IAAI,OAAO,KAAK,OAAO,IAAI,UAAU,CAAC,EAAE;AACpC,YAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;SAC1B;AACD,QAAA,IAAI,OAAO,IAAI,OAAO,IAAI,UAAU,EAAE;AAClC,YAAA,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;SAC3B;KACJ;IAEM,iBAAiB,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC;KACtC;IAEM,kBAAkB,GAAA;AACrB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KAC1B;IAEM,kBAAkB,GAAA;AACrB,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KAC3B;wGA/LQ,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;4FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,2BAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrC5B,iqHA6FA,EAAA,MAAA,EAAA,CAAA,49IAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED1Dc,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,UAAA,EAAA,oBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,aAAA,EAAA,cAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kBAAA,EAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,EAAA,QAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAE/D,eAAe,EAAA,UAAA,EAAA,CAAA;kBAV3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAGd,IAAA,EAAA;AACF,wBAAA,6BAA6B,EAAE,SAAS;AAC3C,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,OAAA,EACP,CAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,iqHAAA,EAAA,MAAA,EAAA,CAAA,49IAAA,CAAA,EAAA,CAAA;8BAIlE,QAAQ,EAAA,CAAA;sBADd,WAAW;uBAAC,iBAAiB,CAAA;gBAQvB,EAAE,EAAA,CAAA;sBADR,KAAK;gBAOC,KAAK,EAAA,CAAA;sBADX,KAAK;gBAOC,OAAO,EAAA,CAAA;sBADb,KAAK;gBASC,eAAe,EAAA,CAAA;sBADrB,KAAK;gBAOC,SAAS,EAAA,CAAA;sBADf,KAAK;gBAOC,cAAc,EAAA,CAAA;sBADpB,KAAK;gBASC,KAAK,EAAA,CAAA;sBADX,KAAK;gBASC,UAAU,EAAA,CAAA;sBADhB,KAAK;gBASC,UAAU,EAAA,CAAA;sBADhB,KAAK;gBASC,QAAQ,EAAA,CAAA;sBADd,KAAK;gBASC,SAAS,EAAA,CAAA;sBADf,KAAK;gBASC,IAAI,EAAA,CAAA;sBADV,KAAK;gBAUC,QAAQ,EAAA,CAAA;sBADd,KAAK;gBASC,WAAW,EAAA,CAAA;sBADjB,KAAK;gBASC,IAAI,EAAA,CAAA;sBADV,KAAK;gBAUC,KAAK,EAAA,CAAA;sBADX,KAAK;gBAOC,SAAS,EAAA,CAAA;sBADf,KAAK;gBAOC,KAAK,EAAA,CAAA;sBADX,KAAK;gBAOC,SAAS,EAAA,CAAA;sBADf,KAAK;gBAOC,aAAa,EAAA,CAAA;sBADnB,KAAK;gBAOC,SAAS,EAAA,CAAA;sBADf,KAAK;gBAOC,OAAO,EAAA,CAAA;sBADb,MAAM;;;MEzLE,YAAY,CAAA;wGAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;yGAAZ,YAAY,EAAA,OAAA,EAAA,CAJjB,eAAe,CAAA,EAAA,OAAA,EAAA,CAET,eAAe,CAAA,EAAA,CAAA,CAAA;AAEhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,YAJjB,eAAe,CAAA,EAAA,CAAA,CAAA;;4FAIV,YAAY,EAAA,UAAA,EAAA,CAAA;kBANxB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL,eAAe;AAClB,qBAAA;oBACD,OAAO,EAAE,CAAC,eAAe,CAAC;AAC7B,iBAAA,CAAA;;;ACTD;;AAEG;;;;"}
1	+ {"version":3,"file":"seniorsistemas-angular-components-button.mjs","sources":["../../projects/angular-components/button/src/lib/button/button.component.ts","../../projects/angular-components/button/src/lib/button/button.component.html","../../projects/angular-components/button/src/lib/button/button.module.ts","../../projects/angular-components/button/src/seniorsistemas-angular-components-button.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core';\n\nimport { NgClass, NgStyle } from '@angular/common';\nimport { BadgeModule } from '@seniorsistemas/angular-components/badge';\nimport { TieredMenuItemData, TieredMenuModule } from '@seniorsistemas/angular-components/tiered-menu';\nimport { TooltipModule, TooltipPositions } from '@seniorsistemas/angular-components/tooltip';\nimport { randomHash } from '@seniorsistemas/angular-components/utils';\nimport { ButtonAnimations } from './models/button-animations';\nimport { ButtonBadgeConfig } from './models/button-badge-config';\nimport { ButtonPriority } from './models/button-priority';\n\n/*\n @description Componente de botão versátil que suporta ícones, tooltip, menu de opções\n * (tiered menu), badge, animações e diferentes prioridades visuais. Pode ser configurado\n * como botão de ação simples, botão com menu dropdown ou botão deslizante (slide).\n \n @example\n * ```html\n * <s-button\n * label=\"Salvar\"\n * iconClass=\"fas fa-save\"\n * priority=\"primary\"\n * (clicked)=\"onSave()\" />\n * ```\n \n @category Inputs\n /\n@Component({\n selector: 's-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n host: {\n '[class.s-button-with-badge]': '!!badge',\n },\n standalone: true,\n imports: [NgClass, NgStyle, BadgeModule, TieredMenuModule, TooltipModule],\n})\nexport class ButtonComponent implements OnChanges {\n @HostBinding('style.min-width')\n public minWidth = '40px';\n\n /\n @description Identificador único do elemento botão no DOM.\n * Gerado automaticamente se não informado.\n /\n @Input()\n public id? = `s-button-${randomHash()}`;\n\n /\n @description Texto exibido dentro do botão.\n /\n @Input()\n public label?: string;\n\n /\n @description Texto do tooltip exibido ao passar o mouse sobre o botão.\n /\n @Input()\n public tooltip?: string;\n\n /\n @description Posição do tooltip em relação ao botão.\n \n @default 'top'\n /\n @Input()\n public tooltipPosition: TooltipPositions = 'top';\n\n /\n @description Classe de ícone exibida à esquerda do label (ex.: `'fas fa-save'`).\n /\n @Input()\n public iconClass?: string;\n\n /\n @description Classe de ícone exibida à direita do label.\n /\n @Input()\n public rightIconClass?: string;\n\n /\n @description Exibe o ícone de caret (seta) quando o botão possui um menu de opções.\n \n @default true\n /\n @Input()\n public caret = true;\n\n /\n @description Classe CSS adicional aplicada ao elemento `<button>` interno.\n \n @default ''\n /\n @Input()\n public styleClass = '';\n\n /\n @description Z-index base do painel do menu dropdown associado ao botão.\n \n @default 0\n /\n @Input()\n public baseZIndex = 0;\n\n /\n @description Desabilita o botão, impedindo cliques e interação do usuário.\n \n @default false\n /\n @Input()\n public disabled = false;\n\n /\n @description Aplica estilo auxiliar (menos destaque visual) ao botão.\n \n @default false\n /\n @Input()\n public auxiliary = false;\n\n /\n @description Tipo do elemento `<button>` HTML (`'button'`, `'submit'`, `'reset'`).\n \n @default 'button'\n /\n @Input()\n public type? = 'button';\n\n /\n @description Prioridade visual do botão, que determina seu estilo.\n * Aceita `'primary'`, `'default'`, `'danger'`, `'link'`, entre outros.\n \n @default 'primary'\n /\n @Input()\n public priority?: ButtonPriority = 'primary';\n\n /\n @description Lista de itens do menu dropdown exibido ao clicar no caret do botão.\n \n @default []\n /\n @Input()\n public menuOptions: TieredMenuItemData[] = [];\n\n /\n @description Tamanho visual do botão. Aceita `'default'` ou `'small'`.\n \n @default 'default'\n /\n @Input()\n public size?: 'default' \| 'small' = 'default';\n\n /\n @description Habilita o modo slide, que exibe uma animação de deslize ao passar o mouse.\n * Requer `priority` igual a `'default'` ou `'link'` e um `label` definido.\n \n @default false\n /\n @Input()\n public slide = false;\n\n /\n @description Tipo de animação aplicada ao botão (`'rotate'`, `'pulse'`, etc.).\n /\n @Input()\n public animation?: ButtonAnimations;\n\n /\n @description Configuração do badge exibido sobre o botão, com contador ou indicador visual.\n /\n @Input()\n public badge?: ButtonBadgeConfig;\n\n /\n @description Cor aplicada ao ícone do botão, sobrescrevendo a cor padrão do tema.\n /\n @Input()\n public iconColor?: string;\n\n /\n @description Texto alternativo para o menu associado ao botão, utilizado para acessibilidade.\n /\n @Input()\n public menuAriaLabel?: string;\n\n /\n @description Texto alternativo para quando o botão não tiver um texto explicito, utilizado para acessibilidade.\n /\n @Input()\n public ariaLabel?: string;\n\n /\n @description Emitido ao clicar no botão, desde que não esteja desabilitado.\n /\n @Output()\n public clicked: EventEmitter<any> = new EventEmitter();\n\n public isMenuOpen = false;\n\n public validateSlideButton(): boolean {\n return !!(this.slide && (this.priority === 'default' \|\| this.priority === 'link') && this.label?.length);\n }\n\n public ngOnChanges(_: SimpleChanges): void {\n const hasIcon = this.iconClass;\n const hasText = this.label;\n\n const isMultiple = this.menuOptions?.length;\n\n if (hasText \|\| (hasIcon && isMultiple)) {\n this.minWidth = '80px';\n }\n if (hasText && hasIcon && isMultiple) {\n this.minWidth = '100px';\n }\n }\n\n public isRotateAnimation(): boolean {\n return this.animation === 'rotate';\n }\n\n public onTieredMenuOpened(): void {\n this.isMenuOpen = true;\n }\n\n public onTieredMenuClosed(): void {\n this.isMenuOpen = false;\n }\n}\n\n","<button\n [id]=\"id\"\n [type]=\"type\"\n [class]=\"styleClass\"\n class=\"inline-flex items-center justify-center border border-solid cursor-pointer font-open-sans text-sm max-w-full min-w-[40px] outline-none overflow-visible py-[5px] px-[10px] relative no-underline normal-case transition-[background-color,border-color,color] duration-200 ease-out text-grayscale-0 disabled:cursor-text disabled:opacity-50\"\n [ngClass]=\"{\n 'rounded-medium': !auxiliary,\n 'rounded-[20px]': auxiliary && !(iconClass && !label && !menuOptions.length),\n 'rounded-[50%]': auxiliary && !!(iconClass && !label && !menuOptions.length),\n 'h-[35px]': size !== 'small',\n 'h-[25px]': size === 'small',\n 'max-w-6 max-h-6 min-w-6': size === 'small' && !!(iconClass && !label && !menuOptions.length),\n 's-button-auxiliary': auxiliary,\n 's-button-with-icon': !!iconClass,\n 's-button-with-text': !!label,\n 's-button-only-icon': !!(iconClass && !label && !menuOptions.length),\n 's-button-empty': !iconClass && !label,\n 's-button-size-default': size === 'default',\n 's-button-size-small': size === 'small',\n 's-button-priority-default': priority === 'default',\n 's-button-priority-primary': priority === 'primary',\n 's-button-priority-secondary': priority === 'secondary',\n 's-button-priority-link': priority === 'link',\n 's-button-priority-danger': priority === 'danger',\n 's-button-multiple': (caret && menuOptions.length) \|\| !!rightIconClass,\n 's-button--slide': validateSlideButton(),\n 's-button--rotate-animation': isRotateAnimation(),\n }\"\n sTieredMenu\n [items]=\"menuOptions\"\n [ariaLabel]=\"menuAriaLabel\"\n [attr.aria-haspopup]=\"menuOptions.length ? 'menu' : null\"\n [attr.aria-expanded]=\"menuOptions.length ? isMenuOpen : null\"\n [attr.aria-label]=\"ariaLabel\"\n [disabled]=\"disabled\"\n [sTooltip]=\"tooltip\"\n [tooltipPosition]=\"tooltipPosition\"\n (tieredMenuOpened)=\"onTieredMenuOpened()\"\n (tieredMenuClosed)=\"onTieredMenuClosed()\"\n (click)=\"clicked.emit($event)\"\n>\n @if (iconClass) {\n <span\n [class]=\"iconClass\"\n [ngClass]=\"{\n 's-button-icon inline-flex items-center justify-center': true,\n 'mr-[10px]': !label && menuOptions.length,\n }\"\n [ngStyle]=\"{ color: iconColor }\"\n aria-hidden=\"true\"\n >\n </span>\n }\n @if (label) {\n <span\n class=\"s-button-text block overflow-hidden text-ellipsis whitespace-nowrap\"\n [ngClass]=\"{\n 'mr-[10px]': !!rightIconClass \|\| menuOptions.length,\n 'ml-[10px]': !!iconClass,\n }\"\n >\n {{ label }}\n </span>\n }\n <ng-content></ng-content>\n @if (rightIconClass) {\n <span\n [class]=\"rightIconClass\"\n [ngClass]=\"{ 's-button-right-icon inline-flex items-center justify-center': true }\"\n [ngStyle]=\"{ color: iconColor }\"\n aria-hidden=\"true\"\n >\n </span>\n }\n @if ((caret && menuOptions.length) \|\| (menuOptions && menuOptions.length)) {\n <span\n class=\"menu-options-icon fa fa-fw fa-caret-down\"\n aria-hidden=\"true\"\n >\n </span>\n }\n</button>\n@if (badge) {\n <div class=\"z-[99] relative right-[15px] bottom-[16px]\">\n <s-badge\n [color]=\"badge.color\"\n [text]=\"badge.text\"\n [iconClass]=\"badge.iconClass\"\n >\n </s-badge>\n </div>\n}\n\n","import { NgModule } from '@angular/core';\n\nimport { ButtonComponent } from './button.component';\n\n@NgModule({\n imports: [\n ButtonComponent,\n ],\n exports: [ButtonComponent],\n})\nexport class ButtonModule { }\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/seniorsistemas-angular-components-card.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ContentChildren, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ContentChildren, NgModule } from '@angular/core';
 import { TemplateDirective } from '@seniorsistemas/angular-components/template';
-import { NgStyle, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 /**
  * @description Componente de cartão com suporte a banner, cabeçalho (título, subtítulo e ícone)
@@ -21,6 +21,10 @@ class CardComponent {
     bannerImage;
     /** @description Faz o card ocupar 100% da largura disponível. @default false */
     fullWidth = false;
+    /** @description Torna o card interativo, habilitando foco por teclado e clique no elemento raiz. @default false */
+    clickable = false;
+    /** @description Emitido quando o usuário clica ou pressiona Enter/Espaço no card (requer `clickable = true`). */
+    clicked = new EventEmitter();
     /** @description Título exibido no cabeçalho do card. @default '' */
     title = '';
     /** @description Subtítulo exibido abaixo do título. @default '' */
@@ -79,15 +83,19 @@ class CardComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "s-card", inputs: { bannerImage: "bannerImage", fullWidth: "fullWidth", title: "title", subtitle: "subtitle", icon: "icon" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "<div\r\n    class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n    [class.w-full]=\"fullWidth\"\r\n>\r\n    @if (showBanner) {\r\n        <div\r\n            class=\"bg-no-repeat bg-cover h-[150px] w-full\"\r\n            [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\r\n        ></div>\r\n    }\r\n\r\n    <!-- @if (hasCustomTemplates) {\r\n  @if (headerTemplate) {\r\n    <div class=\"header\">\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (bodyTemplate) {\r\n    <div class=\"body\">\r\n      <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (footerTemplate) {\r\n    <div class=\"footer\">\r\n      <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n} @else {\r\n  <div class=\"body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  } -->\r\n\r\n    @if (hasHeader) {\r\n        <div class=\"py-4 px-3\">\r\n            @if (headerTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            }\r\n            @if (!headerTemplate) {\r\n                <div class=\"flex gap-3\">\r\n                    @if (icon) {\r\n                        <div class=\"rounded-[50%] bg-grayscale-20 w-[3em] flex items-center justify-center min-h-[3em]\">\r\n                            <i [class]=\"icon\"></i>\r\n                        </div>\r\n                    }\r\n                    <div>\r\n                        @if (title) {\r\n                            <div class=\"text-grayscale-90 text-sm font-bold\">\r\n                                {{ title }}\r\n                            </div>\r\n                        }\r\n                        @if (subtitle) {\r\n                            <div class=\"text-grayscale-60 text-sm font-normal\">\r\n                                {{ subtitle }}\r\n                            </div>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            }\r\n        </div>\r\n    }\r\n    <div class=\"p-4\" [class.border-t]=\"hasHeader\" [class.border-t-grayscale-30]=\"hasHeader\">\r\n        @if (bodyTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n        } @else {\r\n            <ng-content></ng-content>\r\n        }\r\n    </div>\r\n\r\n    @if (footerTemplate) {\r\n        <div class=\"p-4 border-t border-t-grayscale-30\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </div>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "s-card", inputs: { bannerImage: "bannerImage", fullWidth: "fullWidth", clickable: "clickable", title: "title", subtitle: "subtitle", icon: "icon" }, outputs: { clicked: "clicked" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "<div\r\n    class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n    [class.w-full]=\"fullWidth\"\r\n    [attr.tabindex]=\"clickable ? 0 : null\"\r\n    [attr.role]=\"clickable ? 'button' : null\"\r\n    [ngClass]=\"{\r\n        'cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]': clickable\r\n    }\"\r\n    (click)=\"clickable && clicked.emit($event)\"\r\n    (keydown.enter)=\"clickable && clicked.emit($any($event))\"\r\n    (keydown.space)=\"clickable && clicked.emit($any($event)); $event.preventDefault()\"\r\n>\r\n    @if (showBanner) {\r\n        <div\r\n            class=\"bg-no-repeat bg-cover h-[150px] w-full\"\r\n            [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\r\n        ></div>\r\n    }\r\n\r\n    <!-- @if (hasCustomTemplates) {\r\n  @if (headerTemplate) {\r\n    <div class=\"header\">\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (bodyTemplate) {\r\n    <div class=\"body\">\r\n      <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (footerTemplate) {\r\n    <div class=\"footer\">\r\n      <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n} @else {\r\n  <div class=\"body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  } -->\r\n\r\n    @if (hasHeader) {\r\n        <div class=\"py-4 px-3\">\r\n            @if (headerTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            }\r\n            @if (!headerTemplate) {\r\n                <div class=\"flex gap-3\">\r\n                    @if (icon) {\r\n                        <div class=\"rounded-[50%] bg-grayscale-20 w-[3em] flex items-center justify-center min-h-[3em]\">\r\n                            <i [class]=\"icon\"></i>\r\n                        </div>\r\n                    }\r\n                    <div>\r\n                        @if (title) {\r\n                            <div class=\"text-grayscale-90 text-sm font-bold\">\r\n                                {{ title }}\r\n                            </div>\r\n                        }\r\n                        @if (subtitle) {\r\n                            <div class=\"text-grayscale-60 text-sm font-normal\">\r\n                                {{ subtitle }}\r\n                            </div>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            }\r\n        </div>\r\n    }\r\n    <div class=\"p-4\" [class.border-t]=\"hasHeader\" [class.border-t-grayscale-30]=\"hasHeader\">\r\n        @if (bodyTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n        } @else {\r\n            <ng-content></ng-content>\r\n        }\r\n    </div>\r\n\r\n    @if (footerTemplate) {\r\n        <div class=\"p-4 border-t border-t-grayscale-30\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </div>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-card', standalone: true, imports: [NgStyle, NgTemplateOutlet], template: "<div\r\n    class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n    [class.w-full]=\"fullWidth\"\r\n>\r\n    @if (showBanner) {\r\n        <div\r\n            class=\"bg-no-repeat bg-cover h-[150px] w-full\"\r\n            [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\r\n        ></div>\r\n    }\r\n\r\n    <!-- @if (hasCustomTemplates) {\r\n  @if (headerTemplate) {\r\n    <div class=\"header\">\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (bodyTemplate) {\r\n    <div class=\"body\">\r\n      <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (footerTemplate) {\r\n    <div class=\"footer\">\r\n      <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n} @else {\r\n  <div class=\"body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  } -->\r\n\r\n    @if (hasHeader) {\r\n        <div class=\"py-4 px-3\">\r\n            @if (headerTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            }\r\n            @if (!headerTemplate) {\r\n                <div class=\"flex gap-3\">\r\n                    @if (icon) {\r\n                        <div class=\"rounded-[50%] bg-grayscale-20 w-[3em] flex items-center justify-center min-h-[3em]\">\r\n                            <i [class]=\"icon\"></i>\r\n                        </div>\r\n                    }\r\n                    <div>\r\n                        @if (title) {\r\n                            <div class=\"text-grayscale-90 text-sm font-bold\">\r\n                                {{ title }}\r\n                            </div>\r\n                        }\r\n                        @if (subtitle) {\r\n                            <div class=\"text-grayscale-60 text-sm font-normal\">\r\n                                {{ subtitle }}\r\n                            </div>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            }\r\n        </div>\r\n    }\r\n    <div class=\"p-4\" [class.border-t]=\"hasHeader\" [class.border-t-grayscale-30]=\"hasHeader\">\r\n        @if (bodyTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n        } @else {\r\n            <ng-content></ng-content>\r\n        }\r\n    </div>\r\n\r\n    @if (footerTemplate) {\r\n        <div class=\"p-4 border-t border-t-grayscale-30\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </div>\r\n    }\r\n</div>\r\n" }]
+            args: [{ selector: 's-card', standalone: true, imports: [NgClass, NgStyle, NgTemplateOutlet], template: "<div\r\n    class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n    [class.w-full]=\"fullWidth\"\r\n    [attr.tabindex]=\"clickable ? 0 : null\"\r\n    [attr.role]=\"clickable ? 'button' : null\"\r\n    [ngClass]=\"{\r\n        'cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]': clickable\r\n    }\"\r\n    (click)=\"clickable && clicked.emit($event)\"\r\n    (keydown.enter)=\"clickable && clicked.emit($any($event))\"\r\n    (keydown.space)=\"clickable && clicked.emit($any($event)); $event.preventDefault()\"\r\n>\r\n    @if (showBanner) {\r\n        <div\r\n            class=\"bg-no-repeat bg-cover h-[150px] w-full\"\r\n            [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\r\n        ></div>\r\n    }\r\n\r\n    <!-- @if (hasCustomTemplates) {\r\n  @if (headerTemplate) {\r\n    <div class=\"header\">\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (bodyTemplate) {\r\n    <div class=\"body\">\r\n      <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (footerTemplate) {\r\n    <div class=\"footer\">\r\n      <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n} @else {\r\n  <div class=\"body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  } -->\r\n\r\n    @if (hasHeader) {\r\n        <div class=\"py-4 px-3\">\r\n            @if (headerTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            }\r\n            @if (!headerTemplate) {\r\n                <div class=\"flex gap-3\">\r\n                    @if (icon) {\r\n                        <div class=\"rounded-[50%] bg-grayscale-20 w-[3em] flex items-center justify-center min-h-[3em]\">\r\n                            <i [class]=\"icon\"></i>\r\n                        </div>\r\n                    }\r\n                    <div>\r\n                        @if (title) {\r\n                            <div class=\"text-grayscale-90 text-sm font-bold\">\r\n                                {{ title }}\r\n                            </div>\r\n                        }\r\n                        @if (subtitle) {\r\n                            <div class=\"text-grayscale-60 text-sm font-normal\">\r\n                                {{ subtitle }}\r\n                            </div>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            }\r\n        </div>\r\n    }\r\n    <div class=\"p-4\" [class.border-t]=\"hasHeader\" [class.border-t-grayscale-30]=\"hasHeader\">\r\n        @if (bodyTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n        } @else {\r\n            <ng-content></ng-content>\r\n        }\r\n    </div>\r\n\r\n    @if (footerTemplate) {\r\n        <div class=\"p-4 border-t border-t-grayscale-30\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </div>\r\n    }\r\n</div>\r\n" }]
         }], propDecorators: { bannerImage: [{
                 type: Input
             }], fullWidth: [{
                 type: Input
+            }], clickable: [{
+                type: Input
+            }], clicked: [{
+                type: Output
             }], title: [{
                 type: Input
             }], subtitle: [{

package/fesm2022/seniorsistemas-angular-components-card.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"seniorsistemas-angular-components-card.mjs","sources":["../../projects/angular-components/card/src/lib/card/card.component.ts","../../projects/angular-components/card/src/lib/card/card.component.html","../../projects/angular-components/card/src/lib/card/card.module.ts","../../projects/angular-components/card/src/seniorsistemas-angular-components-card.ts"],"sourcesContent":["import { AfterContentInit, Component, ContentChildren, Input, QueryList, TemplateRef } from '@angular/core';\r\n\r\nimport { TemplateDirective } from '@seniorsistemas/angular-components/template';\r\nimport { NgStyle, NgTemplateOutlet } from '@angular/common';\r\n\r\n/*\r\n @description Componente de cartão com suporte a banner, cabeçalho (título, subtítulo e ícone)\r\n * e templates customizáveis para cabeçalho, corpo e rodapé via `TemplateDirective`.\r\n \r\n @example\r\n * ```html\r\n * <s-card title=\"Título\" subtitle=\"Subtítulo\">\r\n * <ng-template sTemplate type=\"body\">Conteúdo</ng-template>\r\n * </s-card>\r\n * ```\r\n \r\n @category Structure\r\n /\r\n@Component({\r\n selector: 's-card',\r\n templateUrl: './card.component.html',\r\n standalone: true,\r\n imports: [NgStyle, NgTemplateOutlet],\r\n})\r\nexport class CardComponent implements AfterContentInit {\r\n /* @description URL da imagem exibida como banner no topo do card. /\r\n @Input()\r\n public bannerImage?: string;\r\n\r\n /* @description Faz o card ocupar 100% da largura disponível. @default false /\r\n @Input()\r\n public fullWidth = false;\r\n\r\n /* @description Título exibido no cabeçalho do card. @default '' /\r\n @Input() title = '';\r\n\r\n /* @description Subtítulo exibido abaixo do título. @default '' /\r\n @Input() subtitle = '';\r\n\r\n /* @description Classe do ícone exibido no cabeçalho. @default '' /\r\n @Input() icon = '';\r\n\r\n public showBanner = false;\r\n\r\n @ContentChildren(TemplateDirective)\r\n public templates?: QueryList<TemplateDirective>;\r\n\r\n public hasCustomTemplates = false;\r\n public headerTemplate?: TemplateRef<unknown>;\r\n public bodyTemplate?: TemplateRef<unknown>;\r\n public footerTemplate?: TemplateRef<unknown>;\r\n\r\n public get hasHeader() {\r\n const headerTemplate = !!this.headerTemplate;\r\n const hasHeaderAttributes = this.title \|\| this.subtitle \|\| this.icon;\r\n return headerTemplate \|\| hasHeaderAttributes;\r\n }\r\n\r\n public async ngAfterContentInit(): Promise<void> {\r\n await this._setShowBanner();\r\n this._setTemplates();\r\n }\r\n\r\n private _getHeaderTemplate(): TemplateRef<unknown> \| undefined {\r\n return this._getCustomTemplate('header');\r\n }\r\n\r\n private _getBodyTemplate(): TemplateRef<unknown> \| undefined {\r\n return this._getCustomTemplate('body');\r\n }\r\n\r\n private _getFooterTemplate(): TemplateRef<unknown> \| undefined {\r\n return this._getCustomTemplate('footer');\r\n }\r\n\r\n private _getCustomTemplate(type: string): TemplateRef<unknown> \| undefined {\r\n return this.templates?.find((template: TemplateDirective) => template.type === type)?.template;\r\n }\r\n\r\n private _setTemplates(): void {\r\n this.headerTemplate = this._getHeaderTemplate();\r\n this.bodyTemplate = this._getBodyTemplate();\r\n this.footerTemplate = this._getFooterTemplate();\r\n\r\n this.hasCustomTemplates = !!(this.headerTemplate \|\| this.bodyTemplate \|\| this.footerTemplate);\r\n }\r\n\r\n private _setShowBanner() {\r\n return new Promise<void>((resolve) => {\r\n if (!this.bannerImage) {\r\n resolve();\r\n return;\r\n }\r\n\r\n const img = new Image();\r\n img.src = this.bannerImage;\r\n img.onload = () => {\r\n this.showBanner = true;\r\n resolve();\r\n };\r\n\r\n img.onerror = () => {\r\n this.showBanner = false;\r\n resolve();\r\n };\r\n });\r\n }\r\n}\r\n","<div\r\n class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n [class.w-full]=\"fullWidth\"\r\n>\r\n @if (showBanner) {\r\n <div\r\n class=\"bg-no-repeat bg-cover h-[150px] w-full\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\r\n ></div>\r\n }\r\n\r\n <!-- @if (hasCustomTemplates) {\r\n @if (headerTemplate) {\r\n <div class=\"header\">\r\n <ng-container ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n </div>\r\n }\r\n @if (bodyTemplate) {\r\n <div class=\"body\">\r\n <ng-container ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n </div>\r\n }\r\n @if (footerTemplate) {\r\n <div class=\"footer\">\r\n <ng-container ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n} @else {\r\n <div class=\"body\">\r\n <ng-content></ng-content>\r\n </div>\r\n } -->\r\n\r\n @if (hasHeader) {\r\n <div class=\"py-4 px-3\">\r\n @if (headerTemplate) {\r\n <ng-container ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n @if (!headerTemplate) {\r\n <div class=\"flex gap-3\">\r\n @if (icon) {\r\n <div class=\"rounded-[50%] bg-grayscale-20 w-[3em] flex items-center justify-center min-h-[3em]\">\r\n <i [class]=\"icon\"></i>\r\n </div>\r\n }\r\n <div>\r\n @if (title) {\r\n <div class=\"text-grayscale-90 text-sm font-bold\">\r\n {{ title }}\r\n </div>\r\n }\r\n @if (subtitle) {\r\n <div class=\"text-grayscale-60 text-sm font-normal\">\r\n {{ subtitle }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"p-4\" [class.border-t]=\"hasHeader\" [class.border-t-grayscale-30]=\"hasHeader\">\r\n @if (bodyTemplate) {\r\n <ng-container ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n } @else {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n\r\n @if (footerTemplate) {\r\n <div class=\"p-4 border-t border-t-grayscale-30\">\r\n <ng-container ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\n\r\nimport { CardComponent } from './card.component';\r\n\r\n@NgModule({\r\n imports: [CardComponent],\r\n exports: [CardComponent],\r\n})\r\nexport class CardModule {}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"seniorsistemas-angular-components-card.mjs","sources":["../../projects/angular-components/card/src/lib/card/card.component.ts","../../projects/angular-components/card/src/lib/card/card.component.html","../../projects/angular-components/card/src/lib/card/card.module.ts","../../projects/angular-components/card/src/seniorsistemas-angular-components-card.ts"],"sourcesContent":["import { AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef } from '@angular/core';\r\n\r\nimport { TemplateDirective } from '@seniorsistemas/angular-components/template';\r\nimport { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';\r\n\r\n/*\r\n @description Componente de cartão com suporte a banner, cabeçalho (título, subtítulo e ícone)\r\n * e templates customizáveis para cabeçalho, corpo e rodapé via `TemplateDirective`.\r\n \r\n @example\r\n * ```html\r\n * <s-card title=\"Título\" subtitle=\"Subtítulo\">\r\n * <ng-template sTemplate type=\"body\">Conteúdo</ng-template>\r\n * </s-card>\r\n * ```\r\n \r\n @category Structure\r\n /\r\n@Component({\r\n selector: 's-card',\r\n templateUrl: './card.component.html',\r\n standalone: true,\r\n imports: [NgClass, NgStyle, NgTemplateOutlet],\r\n})\r\nexport class CardComponent implements AfterContentInit {\r\n /* @description URL da imagem exibida como banner no topo do card. /\r\n @Input()\r\n public bannerImage?: string;\r\n\r\n /* @description Faz o card ocupar 100% da largura disponível. @default false /\r\n @Input()\r\n public fullWidth = false;\r\n\r\n /* @description Torna o card interativo, habilitando foco por teclado e clique no elemento raiz. @default false /\r\n @Input()\r\n public clickable = false;\r\n\r\n /* @description Emitido quando o usuário clica ou pressiona Enter/Espaço no card (requer `clickable = true`). /\r\n @Output()\r\n public clicked = new EventEmitter<MouseEvent>();\r\n\r\n /* @description Título exibido no cabeçalho do card. @default '' /\r\n @Input() title = '';\r\n\r\n /* @description Subtítulo exibido abaixo do título. @default '' /\r\n @Input() subtitle = '';\r\n\r\n /* @description Classe do ícone exibido no cabeçalho. @default '' /\r\n @Input() icon = '';\r\n\r\n public showBanner = false;\r\n\r\n @ContentChildren(TemplateDirective)\r\n public templates?: QueryList<TemplateDirective>;\r\n\r\n public hasCustomTemplates = false;\r\n public headerTemplate?: TemplateRef<unknown>;\r\n public bodyTemplate?: TemplateRef<unknown>;\r\n public footerTemplate?: TemplateRef<unknown>;\r\n\r\n public get hasHeader() {\r\n const headerTemplate = !!this.headerTemplate;\r\n const hasHeaderAttributes = this.title \|\| this.subtitle \|\| this.icon;\r\n return headerTemplate \|\| hasHeaderAttributes;\r\n }\r\n\r\n public async ngAfterContentInit(): Promise<void> {\r\n await this._setShowBanner();\r\n this._setTemplates();\r\n }\r\n\r\n private _getHeaderTemplate(): TemplateRef<unknown> \| undefined {\r\n return this._getCustomTemplate('header');\r\n }\r\n\r\n private _getBodyTemplate(): TemplateRef<unknown> \| undefined {\r\n return this._getCustomTemplate('body');\r\n }\r\n\r\n private _getFooterTemplate(): TemplateRef<unknown> \| undefined {\r\n return this._getCustomTemplate('footer');\r\n }\r\n\r\n private _getCustomTemplate(type: string): TemplateRef<unknown> \| undefined {\r\n return this.templates?.find((template: TemplateDirective) => template.type === type)?.template;\r\n }\r\n\r\n private _setTemplates(): void {\r\n this.headerTemplate = this._getHeaderTemplate();\r\n this.bodyTemplate = this._getBodyTemplate();\r\n this.footerTemplate = this._getFooterTemplate();\r\n\r\n this.hasCustomTemplates = !!(this.headerTemplate \|\| this.bodyTemplate \|\| this.footerTemplate);\r\n }\r\n\r\n private _setShowBanner() {\r\n return new Promise<void>((resolve) => {\r\n if (!this.bannerImage) {\r\n resolve();\r\n return;\r\n }\r\n\r\n const img = new Image();\r\n img.src = this.bannerImage;\r\n img.onload = () => {\r\n this.showBanner = true;\r\n resolve();\r\n };\r\n\r\n img.onerror = () => {\r\n this.showBanner = false;\r\n resolve();\r\n };\r\n });\r\n }\r\n}\r\n","<div\r\n class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n [class.w-full]=\"fullWidth\"\r\n [attr.tabindex]=\"clickable ? 0 : null\"\r\n [attr.role]=\"clickable ? 'button' : null\"\r\n [ngClass]=\"{\r\n 'cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]': clickable\r\n }\"\r\n (click)=\"clickable && clicked.emit($event)\"\r\n (keydown.enter)=\"clickable && clicked.emit($any($event))\"\r\n (keydown.space)=\"clickable && clicked.emit($any($event)); $event.preventDefault()\"\r\n>\r\n @if (showBanner) {\r\n <div\r\n class=\"bg-no-repeat bg-cover h-[150px] w-full\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\r\n ></div>\r\n }\r\n\r\n <!-- @if (hasCustomTemplates) {\r\n @if (headerTemplate) {\r\n <div class=\"header\">\r\n <ng-container ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n </div>\r\n }\r\n @if (bodyTemplate) {\r\n <div class=\"body\">\r\n <ng-container ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n </div>\r\n }\r\n @if (footerTemplate) {\r\n <div class=\"footer\">\r\n <ng-container ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n} @else {\r\n <div class=\"body\">\r\n <ng-content></ng-content>\r\n </div>\r\n } -->\r\n\r\n @if (hasHeader) {\r\n <div class=\"py-4 px-3\">\r\n @if (headerTemplate) {\r\n <ng-container ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n @if (!headerTemplate) {\r\n <div class=\"flex gap-3\">\r\n @if (icon) {\r\n <div class=\"rounded-[50%] bg-grayscale-20 w-[3em] flex items-center justify-center min-h-[3em]\">\r\n <i [class]=\"icon\"></i>\r\n </div>\r\n }\r\n <div>\r\n @if (title) {\r\n <div class=\"text-grayscale-90 text-sm font-bold\">\r\n {{ title }}\r\n </div>\r\n }\r\n @if (subtitle) {\r\n <div class=\"text-grayscale-60 text-sm font-normal\">\r\n {{ subtitle }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"p-4\" [class.border-t]=\"hasHeader\" [class.border-t-grayscale-30]=\"hasHeader\">\r\n @if (bodyTemplate) {\r\n <ng-container ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n } @else {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n\r\n @if (footerTemplate) {\r\n <div class=\"p-4 border-t border-t-grayscale-30\">\r\n <ng-container ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\n\r\nimport { CardComponent } from './card.component';\r\n\r\n@NgModule({\r\n imports: [CardComponent],\r\n exports: [CardComponent],\r\n})\r\nexport class CardModule {}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/seniorsistemas-angular-components-checkbox-list.mjs CHANGED Viewed

@@ -143,7 +143,7 @@ class CheckboxListComponent {
                 useExisting: forwardRef(() => CheckboxListComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-[10px] mb-[10px]\">\r\n    <label>\r\n        <div\r\n            class=\"flex text-grayscale-90 font-open-sans text-sm gap-3\"\r\n            [class.items-center]=\"renderType === 'inline'\"\r\n            [class.flex-col-reverse]=\"renderType === 'block'\"\r\n            [class.opacity-50]=\"isDisabled\"\r\n            [class.cursor-default]=\"isDisabled\"\r\n        >\r\n            <input\r\n                type=\"checkbox\"\r\n                class=\"checkbox-input appearance-none border rounded-medium shrink-0 h-5 w-5 relative\"\r\n                [class.bg-grayscale-0]=\"!state.checked && !state.indeterminate\"\r\n                [class.border-grayscale-30]=\"!state.checked && !state.indeterminate\"\r\n                [class.bg-criticality-blue]=\"state.checked || state.indeterminate\"\r\n                [class.border-criticality-blue]=\"state.checked || state.indeterminate\"\r\n                [class.checkbox-input--checked]=\"state.checked\"\r\n                [class.checkbox-input--indeterminate]=\"state.indeterminate\"\r\n                [class.hover:bg-hippie-blue-50]=\"!isDisabled && !state.checked && !state.indeterminate\"\r\n                [class.cursor-pointer]=\"!isDisabled\"\r\n                [class.cursor-default]=\"isDisabled\"\r\n                [disabled]=\"isDisabled\"\r\n                (change)=\"onCheckboxChange()\"\r\n                [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\r\n                [attr.aria-disabled]=\"isDisabled\"\r\n            />\r\n            {{ data.label }}\r\n        </div>\r\n    </label>\r\n    @if (data.children && data.children.length) {\r\n        <div class=\"ml-5\">\r\n            @for (child of data.children; track child) {\r\n                <s-checkbox-list\r\n                    [data]=\"child\"\r\n                    [ngModel]=\"getCheckboxState(state.children, child.label)\"\r\n                    (ngModelChange)=\"updateParent()\"\r\n                >\r\n                </s-checkbox-list>\r\n            }\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".checkbox-input--checked:after{border:solid white;border-width:0 2px 2px 0;content:\"\";height:12px;left:6px;position:absolute;top:2px;transform:rotate(45deg);width:6px}.checkbox-input--indeterminate:after{background-color:#fff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}\n"], dependencies: [{ kind: "component", type: CheckboxListComponent, selector: "s-checkbox-list", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-[10px] mb-[10px]\">\r\n    <label>\r\n        <div\r\n            class=\"flex text-grayscale-90 font-open-sans text-sm gap-3\"\r\n            [class.items-center]=\"renderType === 'inline'\"\r\n            [class.flex-col-reverse]=\"renderType === 'block'\"\r\n            [class.opacity-50]=\"isDisabled\"\r\n            [class.cursor-default]=\"isDisabled\"\r\n        >\r\n            <input\r\n                type=\"checkbox\"\r\n                class=\"checkbox-input appearance-none border rounded-medium shrink-0 h-5 w-5 relative focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\r\n                [class.bg-grayscale-0]=\"!state.checked && !state.indeterminate\"\r\n                [class.border-grayscale-30]=\"!state.checked && !state.indeterminate\"\r\n                [class.bg-criticality-blue]=\"state.checked || state.indeterminate\"\r\n                [class.border-criticality-blue]=\"state.checked || state.indeterminate\"\r\n                [class.checkbox-input--checked]=\"state.checked\"\r\n                [class.checkbox-input--indeterminate]=\"state.indeterminate\"\r\n                [class.hover:bg-hippie-blue-50]=\"!isDisabled && !state.checked && !state.indeterminate\"\r\n                [class.cursor-pointer]=\"!isDisabled\"\r\n                [class.cursor-default]=\"isDisabled\"\r\n                [disabled]=\"isDisabled\"\r\n                (change)=\"onCheckboxChange()\"\r\n                [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\r\n                [attr.aria-disabled]=\"isDisabled\"\r\n            />\r\n            {{ data.label }}\r\n        </div>\r\n    </label>\r\n    @if (data.children && data.children.length) {\r\n        <div class=\"ml-5\">\r\n            @for (child of data.children; track child) {\r\n                <s-checkbox-list\r\n                    [data]=\"child\"\r\n                    [ngModel]=\"getCheckboxState(state.children, child.label)\"\r\n                    (ngModelChange)=\"updateParent()\"\r\n                >\r\n                </s-checkbox-list>\r\n            }\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".checkbox-input--checked:after{border:solid white;border-width:0 2px 2px 0;content:\"\";height:12px;left:6px;position:absolute;top:2px;transform:rotate(45deg);width:6px}.checkbox-input--indeterminate:after{background-color:#fff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}\n"], dependencies: [{ kind: "component", type: CheckboxListComponent, selector: "s-checkbox-list", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxListComponent, decorators: [{
             type: Component,
@@ -153,7 +153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => CheckboxListComponent),
                             multi: true,
                         },
-                    ], standalone: true, imports: [CheckboxListComponent, FormsModule], template: "<div class=\"flex flex-col gap-[10px] mb-[10px]\">\r\n    <label>\r\n        <div\r\n            class=\"flex text-grayscale-90 font-open-sans text-sm gap-3\"\r\n            [class.items-center]=\"renderType === 'inline'\"\r\n            [class.flex-col-reverse]=\"renderType === 'block'\"\r\n            [class.opacity-50]=\"isDisabled\"\r\n            [class.cursor-default]=\"isDisabled\"\r\n        >\r\n            <input\r\n                type=\"checkbox\"\r\n                class=\"checkbox-input appearance-none border rounded-medium shrink-0 h-5 w-5 relative\"\r\n                [class.bg-grayscale-0]=\"!state.checked && !state.indeterminate\"\r\n                [class.border-grayscale-30]=\"!state.checked && !state.indeterminate\"\r\n                [class.bg-criticality-blue]=\"state.checked || state.indeterminate\"\r\n                [class.border-criticality-blue]=\"state.checked || state.indeterminate\"\r\n                [class.checkbox-input--checked]=\"state.checked\"\r\n                [class.checkbox-input--indeterminate]=\"state.indeterminate\"\r\n                [class.hover:bg-hippie-blue-50]=\"!isDisabled && !state.checked && !state.indeterminate\"\r\n                [class.cursor-pointer]=\"!isDisabled\"\r\n                [class.cursor-default]=\"isDisabled\"\r\n                [disabled]=\"isDisabled\"\r\n                (change)=\"onCheckboxChange()\"\r\n                [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\r\n                [attr.aria-disabled]=\"isDisabled\"\r\n            />\r\n            {{ data.label }}\r\n        </div>\r\n    </label>\r\n    @if (data.children && data.children.length) {\r\n        <div class=\"ml-5\">\r\n            @for (child of data.children; track child) {\r\n                <s-checkbox-list\r\n                    [data]=\"child\"\r\n                    [ngModel]=\"getCheckboxState(state.children, child.label)\"\r\n                    (ngModelChange)=\"updateParent()\"\r\n                >\r\n                </s-checkbox-list>\r\n            }\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".checkbox-input--checked:after{border:solid white;border-width:0 2px 2px 0;content:\"\";height:12px;left:6px;position:absolute;top:2px;transform:rotate(45deg);width:6px}.checkbox-input--indeterminate:after{background-color:#fff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}\n"] }]
+                    ], standalone: true, imports: [CheckboxListComponent, FormsModule], template: "<div class=\"flex flex-col gap-[10px] mb-[10px]\">\r\n    <label>\r\n        <div\r\n            class=\"flex text-grayscale-90 font-open-sans text-sm gap-3\"\r\n            [class.items-center]=\"renderType === 'inline'\"\r\n            [class.flex-col-reverse]=\"renderType === 'block'\"\r\n            [class.opacity-50]=\"isDisabled\"\r\n            [class.cursor-default]=\"isDisabled\"\r\n        >\r\n            <input\r\n                type=\"checkbox\"\r\n                class=\"checkbox-input appearance-none border rounded-medium shrink-0 h-5 w-5 relative focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\r\n                [class.bg-grayscale-0]=\"!state.checked && !state.indeterminate\"\r\n                [class.border-grayscale-30]=\"!state.checked && !state.indeterminate\"\r\n                [class.bg-criticality-blue]=\"state.checked || state.indeterminate\"\r\n                [class.border-criticality-blue]=\"state.checked || state.indeterminate\"\r\n                [class.checkbox-input--checked]=\"state.checked\"\r\n                [class.checkbox-input--indeterminate]=\"state.indeterminate\"\r\n                [class.hover:bg-hippie-blue-50]=\"!isDisabled && !state.checked && !state.indeterminate\"\r\n                [class.cursor-pointer]=\"!isDisabled\"\r\n                [class.cursor-default]=\"isDisabled\"\r\n                [disabled]=\"isDisabled\"\r\n                (change)=\"onCheckboxChange()\"\r\n                [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\r\n                [attr.aria-disabled]=\"isDisabled\"\r\n            />\r\n            {{ data.label }}\r\n        </div>\r\n    </label>\r\n    @if (data.children && data.children.length) {\r\n        <div class=\"ml-5\">\r\n            @for (child of data.children; track child) {\r\n                <s-checkbox-list\r\n                    [data]=\"child\"\r\n                    [ngModel]=\"getCheckboxState(state.children, child.label)\"\r\n                    (ngModelChange)=\"updateParent()\"\r\n                >\r\n                </s-checkbox-list>\r\n            }\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".checkbox-input--checked:after{border:solid white;border-width:0 2px 2px 0;content:\"\";height:12px;left:6px;position:absolute;top:2px;transform:rotate(45deg);width:6px}.checkbox-input--indeterminate:after{background-color:#fff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}\n"] }]
         }], propDecorators: { data: [{
                 type: Input,
                 args: [{ required: true }]

package/fesm2022/seniorsistemas-angular-components-checkbox-list.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"seniorsistemas-angular-components-checkbox-list.mjs","sources":["../../projects/angular-components/checkbox-list/src/lib/checkbox-list/checkbox-list.component.ts","../../projects/angular-components/checkbox-list/src/lib/checkbox-list/checkbox-list.component.html","../../projects/angular-components/checkbox-list/src/lib/checkbox-list/checkbox-list.module.ts","../../projects/angular-components/checkbox-list/src/seniorsistemas-angular-components-checkbox-list.ts"],"sourcesContent":["import { Component, forwardRef, inject, Input } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\nimport { CheckboxListData } from './models/checkbox-list-data';\r\nimport { CheckboxListChildren, CheckboxListState } from './models/checkbox-list-state';\r\n\r\n/*\r\n @description Componente de lista de checkboxes hierárquica, com suporte a estados\r\n * pai/filho e indeterminado. Ao marcar/desmarcar o item pai, todos os filhos são\r\n * afetados, e o estado do pai é calculado automaticamente com base nos filhos.\r\n * Implementa {@link ControlValueAccessor} para uso em formulários Angular.\r\n \r\n @example\r\n * ```html\r\n * <s-checkbox-list\r\n * formControlName=\"permissoes\"\r\n * [data]=\"estruturaPermissoes\" />\r\n * ```\r\n \r\n @category Inputs\r\n /\r\n@Component({\r\n selector: 's-checkbox-list',\r\n templateUrl: './checkbox-list.component.html',\r\n styles: [`\r\n .checkbox-input--checked::after {\r\n border: solid white;\r\n border-width: 0 2px 2px 0;\r\n content: \"\";\r\n height: 12px;\r\n left: 6px;\r\n position: absolute;\r\n top: 2px;\r\n transform: rotate(45deg);\r\n width: 6px;\r\n }\r\n .checkbox-input--indeterminate::after {\r\n background-color: white;\r\n content: \"\";\r\n height: 2px;\r\n left: 50%;\r\n position: absolute;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 10px;\r\n }\r\n `],\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => CheckboxListComponent),\r\n multi: true,\r\n },\r\n ],\r\n standalone: true,\r\n imports: [CheckboxListComponent, FormsModule],\r\n})\r\nexport class CheckboxListComponent implements ControlValueAccessor {\r\n /\r\n @description Estrutura de dados que define o item raiz e seus filhos.\r\n * Cada `CheckboxListData` pode conter o label, estado inicial e uma lista de filhos recursiva.\r\n * Campo obrigatório.\r\n /\r\n @Input({ required: true })\r\n public data!: CheckboxListData;\r\n\r\n /\r\n @description Instância do nó pai na árvore recursiva, obtida via DI (`@SkipSelf`).\r\n * `null` para o nó raiz. Usada para herdar o estado `disabled` sem expor um `@Input`\r\n * paralelo ao contrato de `ControlValueAccessor`.\r\n /\r\n private readonly _parent = inject(CheckboxListComponent, { skipSelf: true, optional: true });\r\n\r\n public state: CheckboxListState = {\r\n checked: false,\r\n indeterminate: false,\r\n children: {},\r\n };\r\n\r\n private _onChange: (value: CheckboxListState) => void = () => {};\r\n private _onTouched: () => void = () => {};\r\n\r\n public writeValue(value: CheckboxListState): void {\r\n if (value) {\r\n this.state = value;\r\n } else {\r\n this.state = {\r\n checked: false,\r\n indeterminate: false,\r\n disabled: false,\r\n children: this._initializeChildren(this.data),\r\n };\r\n }\r\n }\r\n\r\n public get renderType() {\r\n return this.data.renderType ?? 'inline';\r\n }\r\n\r\n public get isDisabled(): boolean {\r\n return !!this.state.disabled \|\| !!this._parent?.isDisabled;\r\n }\r\n\r\n public registerOnChange(onChange: (value: CheckboxListState) => void): void {\r\n this._onChange = onChange;\r\n }\r\n\r\n public registerOnTouched(onTouched: () => void): void {\r\n this._onTouched = onTouched;\r\n }\r\n\r\n public setDisabledState(isDisabled: boolean): void {\r\n this.state.disabled = isDisabled;\r\n }\r\n\r\n private _initializeChildren(item: CheckboxListData): CheckboxListChildren {\r\n const childrenState: CheckboxListChildren = {};\r\n if (item.children) {\r\n item.children.forEach((child) => {\r\n childrenState[child.label] = {\r\n checked: false,\r\n indeterminate: false,\r\n children: this._initializeChildren(child),\r\n };\r\n });\r\n }\r\n return childrenState;\r\n }\r\n\r\n public getCheckboxState(item: CheckboxListChildren \| undefined, label: string) {\r\n if (item) {\r\n return item[label];\r\n } else {\r\n return {};\r\n }\r\n }\r\n\r\n public updateParent(): void {\r\n const _getProperty = (obj: CheckboxListChildren \| undefined, field: string) => {\r\n if (obj) {\r\n return obj[field];\r\n } else {\r\n return null;\r\n }\r\n };\r\n if (this.data.children && this.data.children.length > 0) {\r\n const allChecked = this.data.children.every(\r\n (child) => _getProperty(this.state.children, child.label)?.checked,\r\n );\r\n const someChecked = this.data.children.some(\r\n (child) =>\r\n _getProperty(this.state.children, child.label)?.checked \|\|\r\n _getProperty(this.state.children, child.label)?.indeterminate,\r\n );\r\n this.state.checked = allChecked;\r\n this.state.indeterminate = !allChecked && someChecked;\r\n }\r\n this._onChange(this.state);\r\n this._onTouched();\r\n }\r\n\r\n public onCheckboxChange(): void {\r\n if (this.isDisabled) {\r\n return;\r\n }\r\n\r\n this.state.checked = !this.state.checked;\r\n this.state.indeterminate = false;\r\n this._toggleChildrenCheck(this.data, this.state, this.state.checked);\r\n this._onChange(this.state);\r\n this._onTouched();\r\n }\r\n\r\n private _toggleChildrenCheck(item: CheckboxListData, state: CheckboxListState, checked: boolean): void {\r\n if (item.children?.length) {\r\n item.children.forEach((child) => {\r\n if (state.children && !state.children[child.label]) {\r\n state.children[child.label] = {\r\n checked: false,\r\n indeterminate: false,\r\n children: this._initializeChildren(child),\r\n };\r\n }\r\n if (state.children) {\r\n state.children[child.label].checked = checked;\r\n state.children[child.label].indeterminate = false;\r\n }\r\n if (child.children && state.children) {\r\n this._toggleChildrenCheck(child, state.children[child.label], checked);\r\n }\r\n });\r\n }\r\n }\r\n}\r\n","<div class=\"flex flex-col gap-[10px] mb-[10px]\">\r\n <label>\r\n <div\r\n class=\"flex text-grayscale-90 font-open-sans text-sm gap-3\"\r\n [class.items-center]=\"renderType === 'inline'\"\r\n [class.flex-col-reverse]=\"renderType === 'block'\"\r\n [class.opacity-50]=\"isDisabled\"\r\n [class.cursor-default]=\"isDisabled\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"checkbox-input appearance-none border rounded-medium shrink-0 h-5 w-5 relative\"\r\n [class.bg-grayscale-0]=\"!state.checked && !state.indeterminate\"\r\n [class.border-grayscale-30]=\"!state.checked && !state.indeterminate\"\r\n [class.bg-criticality-blue]=\"state.checked \|\| state.indeterminate\"\r\n [class.border-criticality-blue]=\"state.checked \|\| state.indeterminate\"\r\n [class.checkbox-input--checked]=\"state.checked\"\r\n [class.checkbox-input--indeterminate]=\"state.indeterminate\"\r\n [class.hover:bg-hippie-blue-50]=\"!isDisabled && !state.checked && !state.indeterminate\"\r\n [class.cursor-pointer]=\"!isDisabled\"\r\n [class.cursor-default]=\"isDisabled\"\r\n [disabled]=\"isDisabled\"\r\n (change)=\"onCheckboxChange()\"\r\n [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\r\n [attr.aria-disabled]=\"isDisabled\"\r\n />\r\n {{ data.label }}\r\n </div>\r\n </label>\r\n @if (data.children && data.children.length) {\r\n <div class=\"ml-5\">\r\n @for (child of data.children; track child) {\r\n <s-checkbox-list\r\n [data]=\"child\"\r\n [ngModel]=\"getCheckboxState(state.children, child.label)\"\r\n (ngModelChange)=\"updateParent()\"\r\n >\r\n </s-checkbox-list>\r\n }\r\n </div>\r\n }\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\n\r\nimport { CheckboxListComponent } from './checkbox-list.component';\r\n\r\n@NgModule({\r\n imports: [CheckboxListComponent],\r\n exports: [CheckboxListComponent],\r\n})\r\nexport class CheckboxListModule {}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;AAcG;MAqCU,qBAAqB,CAAA;AAC9B;;;;AAIG;AAEI,IAAA,IAAI,CAAoB;AAE/B;;;;AAIG;AACc,IAAA,OAAO,GAAG,MAAM,CAAC,qBAAqB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;AAEtF,IAAA,KAAK,GAAsB;AAC9B,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,aAAa,EAAE,KAAK;AACpB,QAAA,QAAQ,EAAE,EAAE;KACf,CAAC;AAEM,IAAA,SAAS,GAAuC,MAAK,GAAG,CAAC;AACzD,IAAA,UAAU,GAAe,MAAK,GAAG,CAAC;AAEnC,IAAA,UAAU,CAAC,KAAwB,EAAA;QACtC,IAAI,KAAK,EAAE;AACP,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACtB;aAAM;YACH,IAAI,CAAC,KAAK,GAAG;AACT,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,aAAa,EAAE,KAAK;AACpB,gBAAA,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC;aAChD,CAAC;SACL;KACJ;AAED,IAAA,IAAW,UAAU,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,QAAQ,CAAC;KAC3C;AAED,IAAA,IAAW,UAAU,GAAA;AACjB,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC;KAC9D;AAEM,IAAA,gBAAgB,CAAC,QAA4C,EAAA;AAChE,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;KAC7B;AAEM,IAAA,iBAAiB,CAAC,SAAqB,EAAA;AAC1C,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;KAC/B;AAEM,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AACvC,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;KACpC;AAEO,IAAA,mBAAmB,CAAC,IAAsB,EAAA;QAC9C,MAAM,aAAa,GAAyB,EAAE,CAAC;AAC/C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AAC5B,gBAAA,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG;AACzB,oBAAA,OAAO,EAAE,KAAK;AACd,oBAAA,aAAa,EAAE,KAAK;AACpB,oBAAA,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC;iBAC5C,CAAC;AACN,aAAC,CAAC,CAAC;SACN;AACD,QAAA,OAAO,aAAa,CAAC;KACxB;IAEM,gBAAgB,CAAC,IAAsC,EAAE,KAAa,EAAA;QACzE,IAAI,IAAI,EAAE;AACN,YAAA,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC;SACtB;aAAM;AACH,YAAA,OAAO,EAAE,CAAC;SACb;KACJ;IAEM,YAAY,GAAA;AACf,QAAA,MAAM,YAAY,GAAG,CAAC,GAAqC,EAAE,KAAa,KAAI;YAC1E,IAAI,GAAG,EAAE;AACL,gBAAA,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC;aACrB;iBAAM;AACH,gBAAA,OAAO,IAAI,CAAC;aACf;AACL,SAAC,CAAC;AACF,QAAA,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AACrD,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CACvC,CAAC,KAAK,KAAK,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,OAAO,CACrE,CAAC;AACF,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CACvC,CAAC,KAAK,KACF,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,OAAO;AACvD,gBAAA,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,CACpE,CAAC;AACF,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC;YAChC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,UAAU,IAAI,WAAW,CAAC;SACzD;AACD,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,UAAU,EAAE,CAAC;KACrB;IAEM,gBAAgB,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACjB,OAAO;SACV;QAED,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AACzC,QAAA,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC;AACjC,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACrE,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,UAAU,EAAE,CAAC;KACrB;AAEO,IAAA,oBAAoB,CAAC,IAAsB,EAAE,KAAwB,EAAE,OAAgB,EAAA;AAC3F,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE;YACvB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AAC5B,gBAAA,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;AAChD,oBAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG;AAC1B,wBAAA,OAAO,EAAE,KAAK;AACd,wBAAA,aAAa,EAAE,KAAK;AACpB,wBAAA,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC;qBAC5C,CAAC;iBACL;AACD,gBAAA,IAAI,KAAK,CAAC,QAAQ,EAAE;oBAChB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,OAAO,CAAC;oBAC9C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,KAAK,CAAC;iBACrD;gBACD,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClC,oBAAA,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;iBAC1E;AACL,aAAC,CAAC,CAAC;SACN;KACJ;wGAvIQ,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,EAVnB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA;AACP,YAAA;AACI,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,qBAAqB,CAAC;AACpD,gBAAA,KAAK,EAAE,IAAI;AACd,aAAA;AACJ,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrDL,yjEA0CA,EAAA,MAAA,EAAA,CAAA,6UAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDea,qBAAqB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAFG,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAEnC,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBApCjC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAyBhB,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,2BAA2B,CAAC;AACpD,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;AACJ,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,OAAA,EACP,CAAwB,qBAAA,EAAA,WAAW,CAAC,EAAA,QAAA,EAAA,yjEAAA,EAAA,MAAA,EAAA,CAAA,6UAAA,CAAA,EAAA,CAAA;8BAStC,IAAI,EAAA,CAAA;sBADV,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;;;MEvDhB,kBAAkB,CAAA;wGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;yGAAlB,kBAAkB,EAAA,OAAA,EAAA,CAHjB,qBAAqB,CAAA,EAAA,OAAA,EAAA,CACrB,qBAAqB,CAAA,EAAA,CAAA,CAAA;AAEtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAHjB,qBAAqB,CAAA,EAAA,CAAA,CAAA;;4FAGtB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,qBAAqB,CAAC;AACnC,iBAAA,CAAA;;;ACPD;;AAEG;;;;"}
1	+ {"version":3,"file":"seniorsistemas-angular-components-checkbox-list.mjs","sources":["../../projects/angular-components/checkbox-list/src/lib/checkbox-list/checkbox-list.component.ts","../../projects/angular-components/checkbox-list/src/lib/checkbox-list/checkbox-list.component.html","../../projects/angular-components/checkbox-list/src/lib/checkbox-list/checkbox-list.module.ts","../../projects/angular-components/checkbox-list/src/seniorsistemas-angular-components-checkbox-list.ts"],"sourcesContent":["import { Component, forwardRef, inject, Input } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\nimport { CheckboxListData } from './models/checkbox-list-data';\r\nimport { CheckboxListChildren, CheckboxListState } from './models/checkbox-list-state';\r\n\r\n/*\r\n @description Componente de lista de checkboxes hierárquica, com suporte a estados\r\n * pai/filho e indeterminado. Ao marcar/desmarcar o item pai, todos os filhos são\r\n * afetados, e o estado do pai é calculado automaticamente com base nos filhos.\r\n * Implementa {@link ControlValueAccessor} para uso em formulários Angular.\r\n \r\n @example\r\n * ```html\r\n * <s-checkbox-list\r\n * formControlName=\"permissoes\"\r\n * [data]=\"estruturaPermissoes\" />\r\n * ```\r\n \r\n @category Inputs\r\n /\r\n@Component({\r\n selector: 's-checkbox-list',\r\n templateUrl: './checkbox-list.component.html',\r\n styles: [`\r\n .checkbox-input--checked::after {\r\n border: solid white;\r\n border-width: 0 2px 2px 0;\r\n content: \"\";\r\n height: 12px;\r\n left: 6px;\r\n position: absolute;\r\n top: 2px;\r\n transform: rotate(45deg);\r\n width: 6px;\r\n }\r\n .checkbox-input--indeterminate::after {\r\n background-color: white;\r\n content: \"\";\r\n height: 2px;\r\n left: 50%;\r\n position: absolute;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 10px;\r\n }\r\n `],\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => CheckboxListComponent),\r\n multi: true,\r\n },\r\n ],\r\n standalone: true,\r\n imports: [CheckboxListComponent, FormsModule],\r\n})\r\nexport class CheckboxListComponent implements ControlValueAccessor {\r\n /\r\n @description Estrutura de dados que define o item raiz e seus filhos.\r\n * Cada `CheckboxListData` pode conter o label, estado inicial e uma lista de filhos recursiva.\r\n * Campo obrigatório.\r\n /\r\n @Input({ required: true })\r\n public data!: CheckboxListData;\r\n\r\n /\r\n @description Instância do nó pai na árvore recursiva, obtida via DI (`@SkipSelf`).\r\n * `null` para o nó raiz. Usada para herdar o estado `disabled` sem expor um `@Input`\r\n * paralelo ao contrato de `ControlValueAccessor`.\r\n /\r\n private readonly _parent = inject(CheckboxListComponent, { skipSelf: true, optional: true });\r\n\r\n public state: CheckboxListState = {\r\n checked: false,\r\n indeterminate: false,\r\n children: {},\r\n };\r\n\r\n private _onChange: (value: CheckboxListState) => void = () => {};\r\n private _onTouched: () => void = () => {};\r\n\r\n public writeValue(value: CheckboxListState): void {\r\n if (value) {\r\n this.state = value;\r\n } else {\r\n this.state = {\r\n checked: false,\r\n indeterminate: false,\r\n disabled: false,\r\n children: this._initializeChildren(this.data),\r\n };\r\n }\r\n }\r\n\r\n public get renderType() {\r\n return this.data.renderType ?? 'inline';\r\n }\r\n\r\n public get isDisabled(): boolean {\r\n return !!this.state.disabled \|\| !!this._parent?.isDisabled;\r\n }\r\n\r\n public registerOnChange(onChange: (value: CheckboxListState) => void): void {\r\n this._onChange = onChange;\r\n }\r\n\r\n public registerOnTouched(onTouched: () => void): void {\r\n this._onTouched = onTouched;\r\n }\r\n\r\n public setDisabledState(isDisabled: boolean): void {\r\n this.state.disabled = isDisabled;\r\n }\r\n\r\n private _initializeChildren(item: CheckboxListData): CheckboxListChildren {\r\n const childrenState: CheckboxListChildren = {};\r\n if (item.children) {\r\n item.children.forEach((child) => {\r\n childrenState[child.label] = {\r\n checked: false,\r\n indeterminate: false,\r\n children: this._initializeChildren(child),\r\n };\r\n });\r\n }\r\n return childrenState;\r\n }\r\n\r\n public getCheckboxState(item: CheckboxListChildren \| undefined, label: string) {\r\n if (item) {\r\n return item[label];\r\n } else {\r\n return {};\r\n }\r\n }\r\n\r\n public updateParent(): void {\r\n const _getProperty = (obj: CheckboxListChildren \| undefined, field: string) => {\r\n if (obj) {\r\n return obj[field];\r\n } else {\r\n return null;\r\n }\r\n };\r\n if (this.data.children && this.data.children.length > 0) {\r\n const allChecked = this.data.children.every(\r\n (child) => _getProperty(this.state.children, child.label)?.checked,\r\n );\r\n const someChecked = this.data.children.some(\r\n (child) =>\r\n _getProperty(this.state.children, child.label)?.checked \|\|\r\n _getProperty(this.state.children, child.label)?.indeterminate,\r\n );\r\n this.state.checked = allChecked;\r\n this.state.indeterminate = !allChecked && someChecked;\r\n }\r\n this._onChange(this.state);\r\n this._onTouched();\r\n }\r\n\r\n public onCheckboxChange(): void {\r\n if (this.isDisabled) {\r\n return;\r\n }\r\n\r\n this.state.checked = !this.state.checked;\r\n this.state.indeterminate = false;\r\n this._toggleChildrenCheck(this.data, this.state, this.state.checked);\r\n this._onChange(this.state);\r\n this._onTouched();\r\n }\r\n\r\n private _toggleChildrenCheck(item: CheckboxListData, state: CheckboxListState, checked: boolean): void {\r\n if (item.children?.length) {\r\n item.children.forEach((child) => {\r\n if (state.children && !state.children[child.label]) {\r\n state.children[child.label] = {\r\n checked: false,\r\n indeterminate: false,\r\n children: this._initializeChildren(child),\r\n };\r\n }\r\n if (state.children) {\r\n state.children[child.label].checked = checked;\r\n state.children[child.label].indeterminate = false;\r\n }\r\n if (child.children && state.children) {\r\n this._toggleChildrenCheck(child, state.children[child.label], checked);\r\n }\r\n });\r\n }\r\n }\r\n}\r\n","<div class=\"flex flex-col gap-[10px] mb-[10px]\">\r\n <label>\r\n <div\r\n class=\"flex text-grayscale-90 font-open-sans text-sm gap-3\"\r\n [class.items-center]=\"renderType === 'inline'\"\r\n [class.flex-col-reverse]=\"renderType === 'block'\"\r\n [class.opacity-50]=\"isDisabled\"\r\n [class.cursor-default]=\"isDisabled\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"checkbox-input appearance-none border rounded-medium shrink-0 h-5 w-5 relative focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\r\n [class.bg-grayscale-0]=\"!state.checked && !state.indeterminate\"\r\n [class.border-grayscale-30]=\"!state.checked && !state.indeterminate\"\r\n [class.bg-criticality-blue]=\"state.checked \|\| state.indeterminate\"\r\n [class.border-criticality-blue]=\"state.checked \|\| state.indeterminate\"\r\n [class.checkbox-input--checked]=\"state.checked\"\r\n [class.checkbox-input--indeterminate]=\"state.indeterminate\"\r\n [class.hover:bg-hippie-blue-50]=\"!isDisabled && !state.checked && !state.indeterminate\"\r\n [class.cursor-pointer]=\"!isDisabled\"\r\n [class.cursor-default]=\"isDisabled\"\r\n [disabled]=\"isDisabled\"\r\n (change)=\"onCheckboxChange()\"\r\n [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\r\n [attr.aria-disabled]=\"isDisabled\"\r\n />\r\n {{ data.label }}\r\n </div>\r\n </label>\r\n @if (data.children && data.children.length) {\r\n <div class=\"ml-5\">\r\n @for (child of data.children; track child) {\r\n <s-checkbox-list\r\n [data]=\"child\"\r\n [ngModel]=\"getCheckboxState(state.children, child.label)\"\r\n (ngModelChange)=\"updateParent()\"\r\n >\r\n </s-checkbox-list>\r\n }\r\n </div>\r\n }\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\n\r\nimport { CheckboxListComponent } from './checkbox-list.component';\r\n\r\n@NgModule({\r\n imports: [CheckboxListComponent],\r\n exports: [CheckboxListComponent],\r\n})\r\nexport class CheckboxListModule {}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/seniorsistemas-angular-components-checkbox.mjs CHANGED Viewed

@@ -78,7 +78,7 @@ class CheckboxComponent {
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n    class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || label() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n               transition-all duration-200 hover:border-grayscale-50\n               group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-1\"\n        [class.bg-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:bg-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n        [class.border-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:border-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.opacity-50]=\"disabled()\"\n    >\n        @if (isIndeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-grayscale-0 h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n\n    @if (label()) {\n        <span\n            [class.opacity-50]=\"disabled()\"\n            class=\"text-grayscale-90 ml-2\"\n            aria-hidden=\"true\"\n        >\n            {{ label() }}\n        </span>\n    }\n</div>\n" });
+        ], ngImport: i0, template: "<div\n    class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || label() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n               transition-[background-color,border-color,opacity] duration-200 hover:border-grayscale-50\n               group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n        [class.bg-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:bg-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n        [class.border-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:border-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.opacity-50]=\"disabled()\"\n    >\n        @if (isIndeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-grayscale-0 h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n\n    @if (label()) {\n        <span\n            [class.opacity-50]=\"disabled()\"\n            class=\"text-grayscale-90 ml-2\"\n            aria-hidden=\"true\"\n        >\n            {{ label() }}\n        </span>\n    }\n</div>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -88,7 +88,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<div\n    class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || label() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n               transition-all duration-200 hover:border-grayscale-50\n               group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-1\"\n        [class.bg-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:bg-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n        [class.border-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:border-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.opacity-50]=\"disabled()\"\n    >\n        @if (isIndeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-grayscale-0 h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n\n    @if (label()) {\n        <span\n            [class.opacity-50]=\"disabled()\"\n            class=\"text-grayscale-90 ml-2\"\n            aria-hidden=\"true\"\n        >\n            {{ label() }}\n        </span>\n    }\n</div>\n" }]
+                    ], template: "<div\n    class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || label() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n               transition-[background-color,border-color,opacity] duration-200 hover:border-grayscale-50\n               group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n        [class.bg-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:bg-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n        [class.border-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:border-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.opacity-50]=\"disabled()\"\n    >\n        @if (isIndeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-grayscale-0 h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n\n    @if (label()) {\n        <span\n            [class.opacity-50]=\"disabled()\"\n            class=\"text-grayscale-90 ml-2\"\n            aria-hidden=\"true\"\n        >\n            {{ label() }}\n        </span>\n    }\n</div>\n" }]
         }] });
 /**

package/fesm2022/seniorsistemas-angular-components-checkbox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"seniorsistemas-angular-components-checkbox.mjs","sources":["../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.component.ts","../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.component.html","../../projects/angular-components/checkbox/src/seniorsistemas-angular-components-checkbox.ts"],"sourcesContent":["import { Component, computed, forwardRef, input, model, signal } from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n/*\r\n @description Componente de caixa de seleção (checkbox) com suporte a três estados:\r\n * marcado, desmarcado e indeterminado. Implementa {@link ControlValueAccessor} para\r\n * integração com Reactive Forms e Template-driven Forms do Angular.\r\n \r\n @example\r\n * ```html\r\n * <s-checkbox\r\n * formControlName=\"aceito\"\r\n * label=\"Aceito os termos de uso\"\r\n * [indeterminate]=\"parcialmenteSelecionado\" />\r\n * ```\r\n \r\n @category Inputs\r\n /\r\n@Component({\r\n selector: 's-checkbox',\r\n standalone: true,\r\n imports: [],\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => CheckboxComponent),\r\n multi: true,\r\n },\r\n ],\r\n templateUrl: './checkbox.component.html',\r\n})\r\nexport class CheckboxComponent implements ControlValueAccessor {\r\n /* @description Controla o estado desabilitado via two-way binding. @default false /\r\n public disabled = model(false);\r\n /* @description Valor marcado/desmarcado do checkbox via two-way binding. @default false /\r\n public checked = model(false);\r\n /* @description Quando `true`, o checkbox inicia no estado indeterminado (traço) até a primeira interação do usuário. @default false /\r\n public indeterminate = input(false);\r\n /* @description Texto do label exibido ao lado do checkbox. @default '' /\r\n public label = input<string>('');\r\n /* @description Rótulo acessível para leitores de tela. Opcional, por padrão usa o valor de `label`. /\r\n public ariaLabel = input<string \| undefined>(undefined);\r\n /* @description ID do elemento que descreve o checkbox (para usar `<label for=\"...\">`). Opcional. /\r\n public ariaLabelledBy = input<string \| undefined>(undefined);\r\n\r\n private _onChange: (value: boolean) => void = () => {};\r\n private _onTouched: () => void = () => {};\r\n private _hasUserInteracted = signal(false);\r\n\r\n /\r\n @description Computed que indica se o estado indeterminado deve ser exibido.\r\n * Retorna `true` enquanto `indeterminate` for `true` e o usuário não tiver interagido.\r\n /\r\n public readonly isIndeterminate = computed(() => this.indeterminate() && !this._hasUserInteracted());\r\n\r\n public toggle(): void {\r\n if (this.disabled()) {\r\n return;\r\n }\r\n\r\n if (this.indeterminate() && !this._hasUserInteracted()) {\r\n this._hasUserInteracted.set(true);\r\n this.checked.set(true);\r\n this.emit(true);\r\n } else {\r\n const newValue = !this.checked();\r\n this.checked.set(newValue);\r\n this.emit(newValue);\r\n }\r\n }\r\n\r\n private emit(value: boolean): void {\r\n this._onChange(value);\r\n }\r\n\r\n public writeValue(value: any): void {\r\n this.checked.set(!!value);\r\n }\r\n\r\n public registerOnChange(onChange: (value: boolean) => void): void {\r\n this._onChange = onChange;\r\n }\r\n\r\n public registerOnTouched(onTouched: () => void): void {\r\n this._onTouched = onTouched;\r\n }\r\n\r\n public setDisabledState(disabled: boolean): void {\r\n this.disabled.set(disabled);\r\n }\r\n\r\n public onBlur(): void {\r\n this._onTouched();\r\n }\r\n}\r\n","<div\n class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n [class.cursor-not-allowed]=\"disabled()\"\n tabindex=\"0\"\n role=\"checkbox\"\n [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() \|\| label() \|\| null\"\n [attr.aria-labelledby]=\"ariaLabelledBy() \|\| null\"\n (click)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (blur)=\"onBlur()\"\n>\n <div\n class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n transition-~~all~~ duration-200 hover:border-grayscale-50\n group-focus-visible:~~ring~~-2 group-focus-visible:~~ring~~-~~primary~~ group-focus-visible:ring-~~offset-1~~\"\n [class.bg-primary]=\"checked() \|\| isIndeterminate()\"\n [class.hover:bg-tarawera-500]=\"checked() \|\| isIndeterminate()\"\n [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n [class.border-primary]=\"checked() \|\| isIndeterminate()\"\n [class.hover:border-tarawera-500]=\"checked() \|\| isIndeterminate()\"\n [class.opacity-50]=\"disabled()\"\n >\n @if (isIndeterminate()) {\n <svg\n class=\"h-3 w-3 text-grayscale-0\"\n fill=\"none\"\n stroke=\"white\"\n stroke-width=\"4\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path d=\"M6 12h12\" />\n </svg>\n } @else {\n @if (checked()) {\n <svg\n class=\"text-grayscale-0 h-3 w-3\"\n fill=\"none\"\n stroke=\"white\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n </svg>\n }\n }\n </div>\n\n @if (label()) {\n <span\n [class.opacity-50]=\"disabled()\"\n class=\"text-grayscale-90 ml-2\"\n aria-hidden=\"true\"\n >\n {{ label() }}\n </span>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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~~6zEA~~+DA,EAAA,CAAA,CAAA;;4FDhCa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAb7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EACV,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,EAAE,EACA,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;AAChD,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,~~6zEAAA~~,EAAA,CAAA;;;AE5BL;;AAEG;;;;"}
1	+ {"version":3,"file":"seniorsistemas-angular-components-checkbox.mjs","sources":["../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.component.ts","../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.component.html","../../projects/angular-components/checkbox/src/seniorsistemas-angular-components-checkbox.ts"],"sourcesContent":["import { Component, computed, forwardRef, input, model, signal } from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n/*\r\n @description Componente de caixa de seleção (checkbox) com suporte a três estados:\r\n * marcado, desmarcado e indeterminado. Implementa {@link ControlValueAccessor} para\r\n * integração com Reactive Forms e Template-driven Forms do Angular.\r\n \r\n @example\r\n * ```html\r\n * <s-checkbox\r\n * formControlName=\"aceito\"\r\n * label=\"Aceito os termos de uso\"\r\n * [indeterminate]=\"parcialmenteSelecionado\" />\r\n * ```\r\n \r\n @category Inputs\r\n /\r\n@Component({\r\n selector: 's-checkbox',\r\n standalone: true,\r\n imports: [],\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => CheckboxComponent),\r\n multi: true,\r\n },\r\n ],\r\n templateUrl: './checkbox.component.html',\r\n})\r\nexport class CheckboxComponent implements ControlValueAccessor {\r\n /* @description Controla o estado desabilitado via two-way binding. @default false /\r\n public disabled = model(false);\r\n /* @description Valor marcado/desmarcado do checkbox via two-way binding. @default false /\r\n public checked = model(false);\r\n /* @description Quando `true`, o checkbox inicia no estado indeterminado (traço) até a primeira interação do usuário. @default false /\r\n public indeterminate = input(false);\r\n /* @description Texto do label exibido ao lado do checkbox. @default '' /\r\n public label = input<string>('');\r\n /* @description Rótulo acessível para leitores de tela. Opcional, por padrão usa o valor de `label`. /\r\n public ariaLabel = input<string \| undefined>(undefined);\r\n /* @description ID do elemento que descreve o checkbox (para usar `<label for=\"...\">`). Opcional. /\r\n public ariaLabelledBy = input<string \| undefined>(undefined);\r\n\r\n private _onChange: (value: boolean) => void = () => {};\r\n private _onTouched: () => void = () => {};\r\n private _hasUserInteracted = signal(false);\r\n\r\n /\r\n @description Computed que indica se o estado indeterminado deve ser exibido.\r\n * Retorna `true` enquanto `indeterminate` for `true` e o usuário não tiver interagido.\r\n /\r\n public readonly isIndeterminate = computed(() => this.indeterminate() && !this._hasUserInteracted());\r\n\r\n public toggle(): void {\r\n if (this.disabled()) {\r\n return;\r\n }\r\n\r\n if (this.indeterminate() && !this._hasUserInteracted()) {\r\n this._hasUserInteracted.set(true);\r\n this.checked.set(true);\r\n this.emit(true);\r\n } else {\r\n const newValue = !this.checked();\r\n this.checked.set(newValue);\r\n this.emit(newValue);\r\n }\r\n }\r\n\r\n private emit(value: boolean): void {\r\n this._onChange(value);\r\n }\r\n\r\n public writeValue(value: any): void {\r\n this.checked.set(!!value);\r\n }\r\n\r\n public registerOnChange(onChange: (value: boolean) => void): void {\r\n this._onChange = onChange;\r\n }\r\n\r\n public registerOnTouched(onTouched: () => void): void {\r\n this._onTouched = onTouched;\r\n }\r\n\r\n public setDisabledState(disabled: boolean): void {\r\n this.disabled.set(disabled);\r\n }\r\n\r\n public onBlur(): void {\r\n this._onTouched();\r\n }\r\n}\r\n","<div\n class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n [class.cursor-not-allowed]=\"disabled()\"\n tabindex=\"0\"\n role=\"checkbox\"\n [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() \|\| label() \|\| null\"\n [attr.aria-labelledby]=\"ariaLabelledBy() \|\| null\"\n (click)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (blur)=\"onBlur()\"\n>\n <div\n class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n transition-[background-color,border-color,opacity] duration-200 hover:border-grayscale-50\n group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n [class.bg-primary]=\"checked() \|\| isIndeterminate()\"\n [class.hover:bg-tarawera-500]=\"checked() \|\| isIndeterminate()\"\n [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n [class.border-primary]=\"checked() \|\| isIndeterminate()\"\n [class.hover:border-tarawera-500]=\"checked() \|\| isIndeterminate()\"\n [class.opacity-50]=\"disabled()\"\n >\n @if (isIndeterminate()) {\n <svg\n class=\"h-3 w-3 text-grayscale-0\"\n fill=\"none\"\n stroke=\"white\"\n stroke-width=\"4\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path d=\"M6 12h12\" />\n </svg>\n } @else {\n @if (checked()) {\n <svg\n class=\"text-grayscale-0 h-3 w-3\"\n fill=\"none\"\n stroke=\"white\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n </svg>\n }\n }\n </div>\n\n @if (label()) {\n <span\n [class.opacity-50]=\"disabled()\"\n class=\"text-grayscale-90 ml-2\"\n aria-hidden=\"true\"\n >\n {{ label() }}\n </span>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}