cloud-ide-element 1.1.185 → 1.1.186
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.
|
@@ -7921,7 +7921,7 @@ class CideEleButtonComponent {
|
|
|
7921
7921
|
}
|
|
7922
7922
|
}
|
|
7923
7923
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleButtonComponent, deps: [{ token: CideElementsService }, { token: i2$1.Router }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7924
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleButtonComponent, isStandalone: true, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: { label: "label", variant: "variant", size: "size", type: "type", shape: "shape", elevation: "elevation", disabled: "disabled", id: "id", loading: "loading", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon", customClass: "customClass", tooltip: "tooltip", ariaLabel: "ariaLabel", testId: "testId", routerLink: "routerLink", routerExtras: "routerExtras", preventDoubleClick: "preventDoubleClick", animated: "animated" }, outputs: { btnClick: "btnClick", doubleClick: "doubleClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.cide-button-disabled": "disabled || loading", "attr.disabled": "(disabled || loading) ? true : null", "class.primary": "variant === \"primary\"", "class.secondary": "variant === \"secondary\"", "class.outline": "variant === \"outline\"", "class.text": "variant === \"text\"", "class.link": "variant === \"link\"", "class.success": "variant === \"success\"", "class.danger": "variant === \"danger\"", "class.warning": "variant === \"warning\"", "class.info": "variant === \"info\"", "class.xs": "size === \"xs\"", "class.sm": "size === \"sm\"", "class.md": "size === \"md\"", "class.lg": "size === \"lg\"", "class.xl": "size === \"xl\"", "class.rounded": "shape === \"rounded\"", "class.pill": "shape === \"pill\"", "class.square": "shape === \"square\"", "class.elevation-none": "elevation === \"none\"", "class.elevation-low": "elevation === \"low\"", "class.elevation-medium": "elevation === \"medium\"", "class.elevation-high": "elevation === \"high\"", "attr.type": "type", "attr.aria-label": "ariaLabel", "attr.aria-disabled": "disabled || loading", "attr.data-testid": "testId", "attr.title": "tooltip", "class": "customClass" }, classAttribute: "cide-button tw-rounded-md tw-py-0.5 tw-select-none tw-flex tw-items-center tw-justify-center" }, usesOnChanges: true, ngImport: i0, template: "@if (isStandaloneElement) {\r\n<!-- When used as standalone element, render button element -->\r\n<button [type]=\"type\" [disabled]=\"disabled || loading\" [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-disabled]=\"disabled || loading\" [attr.data-testid]=\"testId\" [attr.title]=\"tooltip\"\r\n class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n <!-- Left icon -->\r\n @if (leftIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Loading spinner -->\r\n @if (loading) {\r\n <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n @if (label) {\r\n <span>{{ label }}</span>\r\n } @else {\r\n <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n <ng-content></ng-content>\r\n </span>\r\n }\r\n\r\n <!-- Right icon -->\r\n @if (rightIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Spacer for spinner when loading to maintain button width -->\r\n @if (loading) {\r\n <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n }\r\n</button>\r\n} @else {\r\n<!-- When used as attribute directive, just render content -->\r\n<div class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n <!-- Left icon -->\r\n @if (leftIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Loading spinner -->\r\n @if (loading) {\r\n <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n @if (label) {\r\n <span>{{ label }}</span>\r\n } @else {\r\n <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n <ng-content></ng-content>\r\n </span>\r\n }\r\n\r\n <!-- Right icon -->\r\n @if (rightIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Spacer for spinner when loading to maintain button width -->\r\n @if (loading) {\r\n <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n }\r\n</div>\r\n}", styles: [":host{position:relative;background-color:var(--cide-ele-brand-primary, #3b82f6);cursor:pointer;font-family:inherit;font-weight:500;outline:none;overflow:hidden;transition:all .2s ease-in-out;border:none;text-align:center;vertical-align:middle;text-decoration:none;line-height:1.5;letter-spacing:.025em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host:focus-visible{outline:2px solid var(--cide-ele-brand-primary, #3b82f6);outline-offset:2px;box-shadow:0 0 0 3px #3b82f64d}:host:hover:not(:disabled){background-color:var(--cide-ele-brand-primary-hover, #2563eb);transform:translateY(-1px)}:host:active:not(:disabled){transform:translateY(1px)}:host.cide-button-disabled{background-color:var(--cide-button-background-disabled, #9ca3af)!important;cursor:var(--cide-button-cursor-disabled, not-allowed)!important;opacity:.7;pointer-events:none;transform:none!important}:host.xs{font-size:.7rem;padding:.0625rem .25rem;min-height:1.25rem;line-height:1.1}:host.xs .tw-icon-container.tw-mr-2,:host.xs .tw-icon-container.tw-mr-1{margin-right:.125rem!important}:host.xs .tw-icon-container.tw-ml-2,:host.xs .tw-icon-container.tw-ml-1{margin-left:.125rem!important}:host.xs .tw-icon-container i{font-size:.8125rem!important}:host.xs cide-ele-spinner.tw-mr-2,:host.xs cide-ele-spinner.tw-mr-1{margin-right:.125rem!important}:host.xs cide-ele-spinner.tw-ml-2,:host.xs cide-ele-spinner.tw-ml-1{margin-left:.125rem!important}:host.sm{font-size:.875rem;padding:.25rem .5rem}:host.md{font-size:1rem;padding:.25rem .75rem}:host.lg{font-size:1.125rem;padding:.75rem 1rem}:host.xl{font-size:1.25rem;padding:1rem 1.5rem}:host.rounded{border-radius:.5rem}:host.pill{border-radius:9999px}:host.square{border-radius:0}:host.elevation-none{box-shadow:none}:host.elevation-low{box-shadow:0 1px 2px #0000000d}:host.elevation-medium{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host.elevation-high{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.ripple-effect{position:absolute;border-radius:50%;background-color:#fff6;transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}:host{color:#fff}:host.secondary{background-color:var(--cide-ele-brand-secondary, #4b5563);color:#fff}:host.secondary:hover:not(:disabled){background-color:var(--cide-ele-brand-secondary-hover, #374151)}:host.success{background-color:var(--cide-ele-success, #10b981);color:#fff}:host.success:hover:not(:disabled){background-color:var(--cide-ele-success, #10b981)}:host.danger{background-color:var(--cide-ele-error, #ef4444);color:#fff}:host.danger:hover:not(:disabled){background-color:var(--cide-ele-error, #ef4444)}:host.warning{background-color:var(--cide-ele-warning, #f59e0b);color:#fff}:host.warning:hover:not(:disabled){background-color:var(--cide-ele-warning, #f59e0b)}:host.info{background-color:var(--cide-ele-info, #3b82f6);color:#fff}:host.info:hover:not(:disabled){background-color:var(--cide-ele-info, #3b82f6)}:host.outline{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:1px solid var(--cide-ele-brand-primary, #3b82f6)}:host.outline:hover:not(:disabled){background-color:#3b82f60d}:host.outline.secondary{color:var(--cide-ele-brand-secondary, #4b5563);border-color:var(--cide-ele-brand-secondary, #4b5563)}:host.outline.success{color:var(--cide-ele-success, #10b981);border-color:var(--cide-ele-success, #10b981)}:host.outline.danger{color:var(--cide-ele-error, #ef4444);border-color:var(--cide-ele-error, #ef4444)}:host.outline.warning{color:var(--cide-ele-warning, #f59e0b);border-color:var(--cide-ele-warning, #f59e0b)}:host.outline.info{color:var(--cide-ele-info, #3b82f6);border-color:var(--cide-ele-info, #3b82f6)}:host.text{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;padding-left:.5rem;padding-right:.5rem}:host.text:hover:not(:disabled){background-color:#3b82f60d;text-decoration:underline}:host.text.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.text.success{color:var(--cide-ele-success, #10b981)}:host.text.danger{color:var(--cide-ele-error, #ef4444)}:host.text.warning{color:var(--cide-ele-warning, #f59e0b)}:host.text.info{color:var(--cide-ele-info, #3b82f6)}:host.link{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;text-decoration:underline;padding:0;font-weight:400}:host.link:hover:not(:disabled){color:var(--cide-ele-brand-primary-hover, #2563eb);text-decoration:underline}:host.link.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.link.success{color:var(--cide-ele-success, #10b981)}:host.link.danger{color:var(--cide-ele-error, #ef4444)}:host.link.warning{color:var(--cide-ele-warning, #f59e0b)}:host.link.info{color:var(--cide-ele-info, #3b82f6)}.tw-icon-container{display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
|
|
7924
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleButtonComponent, isStandalone: true, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: { label: "label", variant: "variant", size: "size", type: "type", shape: "shape", elevation: "elevation", disabled: "disabled", id: "id", loading: "loading", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon", customClass: "customClass", tooltip: "tooltip", ariaLabel: "ariaLabel", testId: "testId", routerLink: "routerLink", routerExtras: "routerExtras", preventDoubleClick: "preventDoubleClick", animated: "animated" }, outputs: { btnClick: "btnClick", doubleClick: "doubleClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.cide-button-disabled": "disabled || loading", "attr.disabled": "(disabled || loading) ? true : null", "class.primary": "variant === \"primary\"", "class.secondary": "variant === \"secondary\"", "class.outline": "variant === \"outline\"", "class.text": "variant === \"text\"", "class.link": "variant === \"link\"", "class.success": "variant === \"success\"", "class.danger": "variant === \"danger\"", "class.warning": "variant === \"warning\"", "class.info": "variant === \"info\"", "class.xs": "size === \"xs\"", "class.sm": "size === \"sm\"", "class.md": "size === \"md\"", "class.lg": "size === \"lg\"", "class.xl": "size === \"xl\"", "class.rounded": "shape === \"rounded\"", "class.pill": "shape === \"pill\"", "class.square": "shape === \"square\"", "class.elevation-none": "elevation === \"none\"", "class.elevation-low": "elevation === \"low\"", "class.elevation-medium": "elevation === \"medium\"", "class.elevation-high": "elevation === \"high\"", "attr.type": "type", "attr.aria-label": "ariaLabel", "attr.aria-disabled": "disabled || loading", "attr.data-testid": "testId", "attr.title": "tooltip", "class": "customClass" }, classAttribute: "cide-button tw-rounded-md tw-py-0.5 tw-select-none tw-flex tw-items-center tw-justify-center" }, usesOnChanges: true, ngImport: i0, template: "@if (isStandaloneElement) {\r\n<!-- When used as standalone element, render button element -->\r\n<button [type]=\"type\" [disabled]=\"disabled || loading\" [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-disabled]=\"disabled || loading\" [attr.data-testid]=\"testId\" [attr.title]=\"tooltip\"\r\n class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n <!-- Left icon -->\r\n @if (leftIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Loading spinner -->\r\n @if (loading) {\r\n <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n @if (label) {\r\n <span>{{ label }}</span>\r\n } @else {\r\n <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n <ng-content></ng-content>\r\n </span>\r\n }\r\n\r\n <!-- Right icon -->\r\n @if (rightIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Spacer for spinner when loading to maintain button width -->\r\n @if (loading) {\r\n <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n }\r\n</button>\r\n} @else {\r\n<!-- When used as attribute directive, just render content -->\r\n<div class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n <!-- Left icon -->\r\n @if (leftIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Loading spinner -->\r\n @if (loading) {\r\n <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n @if (label) {\r\n <span>{{ label }}</span>\r\n } @else {\r\n <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n <ng-content></ng-content>\r\n </span>\r\n }\r\n\r\n <!-- Right icon -->\r\n @if (rightIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Spacer for spinner when loading to maintain button width -->\r\n @if (loading) {\r\n <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n }\r\n</div>\r\n}", styles: [":host{position:relative;background-color:var(--cide-ele-brand-primary, #3b82f6);cursor:pointer;font-family:inherit;font-weight:500;outline:none;overflow:hidden;transition:all .2s ease-in-out;border:none;text-align:center;vertical-align:middle;text-decoration:none;line-height:1.5;letter-spacing:.025em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host:focus-visible{outline:2px solid var(--cide-ele-brand-primary, #3b82f6);outline-offset:2px;box-shadow:0 0 0 3px #3b82f64d}:host:hover:not(:disabled){background-color:var(--cide-ele-brand-primary-hover, #2563eb);transform:translateY(-1px)}:host:active:not(:disabled){transform:translateY(1px)}:host.cide-button-disabled{background-color:var(--cide-button-background-disabled, #9ca3af)!important;cursor:var(--cide-button-cursor-disabled, not-allowed)!important;opacity:.7;pointer-events:none;transform:none!important}:host.xs{font-size:.65rem;padding:0 .25rem;min-height:1.125rem;line-height:1}:host.xs .tw-icon-container.tw-mr-2,:host.xs .tw-icon-container.tw-mr-1{margin-right:.075rem!important}:host.xs .tw-icon-container.tw-ml-2,:host.xs .tw-icon-container.tw-ml-1{margin-left:.075rem!important}:host.xs .tw-icon-container i{font-size:.75rem!important}:host.xs cide-ele-spinner.tw-mr-2,:host.xs cide-ele-spinner.tw-mr-1{margin-right:.075rem!important}:host.xs cide-ele-spinner.tw-ml-2,:host.xs cide-ele-spinner.tw-ml-1{margin-left:.075rem!important}:host.sm{font-size:.875rem;padding:.25rem .5rem}:host.md{font-size:1rem;padding:.25rem .75rem}:host.lg{font-size:1.125rem;padding:.75rem 1rem}:host.xl{font-size:1.25rem;padding:1rem 1.5rem}:host.rounded{border-radius:.5rem}:host.pill{border-radius:9999px}:host.square{border-radius:0}:host.elevation-none{box-shadow:none}:host.elevation-low{box-shadow:0 1px 2px #0000000d}:host.elevation-medium{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host.elevation-high{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.ripple-effect{position:absolute;border-radius:50%;background-color:#fff6;transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}:host{color:#fff}:host.secondary{background-color:var(--cide-ele-brand-secondary, #4b5563);color:#fff}:host.secondary:hover:not(:disabled){background-color:var(--cide-ele-brand-secondary-hover, #374151)}:host.success{background-color:var(--cide-ele-success, #10b981);color:#fff}:host.success:hover:not(:disabled){background-color:var(--cide-ele-success, #10b981)}:host.danger{background-color:var(--cide-ele-error, #ef4444);color:#fff}:host.danger:hover:not(:disabled){background-color:var(--cide-ele-error, #ef4444)}:host.warning{background-color:var(--cide-ele-warning, #f59e0b);color:#fff}:host.warning:hover:not(:disabled){background-color:var(--cide-ele-warning, #f59e0b)}:host.info{background-color:var(--cide-ele-info, #3b82f6);color:#fff}:host.info:hover:not(:disabled){background-color:var(--cide-ele-info, #3b82f6)}:host.outline{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:1px solid var(--cide-ele-brand-primary, #3b82f6)}:host.outline:hover:not(:disabled){background-color:#3b82f60d}:host.outline.secondary{color:var(--cide-ele-brand-secondary, #4b5563);border-color:var(--cide-ele-brand-secondary, #4b5563)}:host.outline.success{color:var(--cide-ele-success, #10b981);border-color:var(--cide-ele-success, #10b981)}:host.outline.danger{color:var(--cide-ele-error, #ef4444);border-color:var(--cide-ele-error, #ef4444)}:host.outline.warning{color:var(--cide-ele-warning, #f59e0b);border-color:var(--cide-ele-warning, #f59e0b)}:host.outline.info{color:var(--cide-ele-info, #3b82f6);border-color:var(--cide-ele-info, #3b82f6)}:host.text{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;padding-left:.5rem;padding-right:.5rem}:host.text:hover:not(:disabled){background-color:#3b82f60d;text-decoration:underline}:host.text.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.text.success{color:var(--cide-ele-success, #10b981)}:host.text.danger{color:var(--cide-ele-error, #ef4444)}:host.text.warning{color:var(--cide-ele-warning, #f59e0b)}:host.text.info{color:var(--cide-ele-info, #3b82f6)}:host.link{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;text-decoration:underline;padding:0;font-weight:400}:host.link:hover:not(:disabled){color:var(--cide-ele-brand-primary-hover, #2563eb);text-decoration:underline}:host.link.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.link.success{color:var(--cide-ele-success, #10b981)}:host.link.danger{color:var(--cide-ele-error, #ef4444)}:host.link.warning{color:var(--cide-ele-warning, #f59e0b)}:host.link.info{color:var(--cide-ele-info, #3b82f6)}.tw-icon-container{display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
|
|
7925
7925
|
}
|
|
7926
7926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleButtonComponent, decorators: [{
|
|
7927
7927
|
type: Component,
|
|
@@ -7956,7 +7956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7956
7956
|
'[attr.data-testid]': 'testId',
|
|
7957
7957
|
'[attr.title]': 'tooltip',
|
|
7958
7958
|
'[class]': 'customClass'
|
|
7959
|
-
}, template: "@if (isStandaloneElement) {\r\n<!-- When used as standalone element, render button element -->\r\n<button [type]=\"type\" [disabled]=\"disabled || loading\" [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-disabled]=\"disabled || loading\" [attr.data-testid]=\"testId\" [attr.title]=\"tooltip\"\r\n class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n <!-- Left icon -->\r\n @if (leftIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Loading spinner -->\r\n @if (loading) {\r\n <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n @if (label) {\r\n <span>{{ label }}</span>\r\n } @else {\r\n <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n <ng-content></ng-content>\r\n </span>\r\n }\r\n\r\n <!-- Right icon -->\r\n @if (rightIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Spacer for spinner when loading to maintain button width -->\r\n @if (loading) {\r\n <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n }\r\n</button>\r\n} @else {\r\n<!-- When used as attribute directive, just render content -->\r\n<div class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n <!-- Left icon -->\r\n @if (leftIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Loading spinner -->\r\n @if (loading) {\r\n <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n @if (label) {\r\n <span>{{ label }}</span>\r\n } @else {\r\n <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n <ng-content></ng-content>\r\n </span>\r\n }\r\n\r\n <!-- Right icon -->\r\n @if (rightIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Spacer for spinner when loading to maintain button width -->\r\n @if (loading) {\r\n <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n }\r\n</div>\r\n}", styles: [":host{position:relative;background-color:var(--cide-ele-brand-primary, #3b82f6);cursor:pointer;font-family:inherit;font-weight:500;outline:none;overflow:hidden;transition:all .2s ease-in-out;border:none;text-align:center;vertical-align:middle;text-decoration:none;line-height:1.5;letter-spacing:.025em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host:focus-visible{outline:2px solid var(--cide-ele-brand-primary, #3b82f6);outline-offset:2px;box-shadow:0 0 0 3px #3b82f64d}:host:hover:not(:disabled){background-color:var(--cide-ele-brand-primary-hover, #2563eb);transform:translateY(-1px)}:host:active:not(:disabled){transform:translateY(1px)}:host.cide-button-disabled{background-color:var(--cide-button-background-disabled, #9ca3af)!important;cursor:var(--cide-button-cursor-disabled, not-allowed)!important;opacity:.7;pointer-events:none;transform:none!important}:host.xs{font-size:.
|
|
7959
|
+
}, template: "@if (isStandaloneElement) {\r\n<!-- When used as standalone element, render button element -->\r\n<button [type]=\"type\" [disabled]=\"disabled || loading\" [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-disabled]=\"disabled || loading\" [attr.data-testid]=\"testId\" [attr.title]=\"tooltip\"\r\n class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n <!-- Left icon -->\r\n @if (leftIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Loading spinner -->\r\n @if (loading) {\r\n <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n @if (label) {\r\n <span>{{ label }}</span>\r\n } @else {\r\n <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n <ng-content></ng-content>\r\n </span>\r\n }\r\n\r\n <!-- Right icon -->\r\n @if (rightIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Spacer for spinner when loading to maintain button width -->\r\n @if (loading) {\r\n <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n }\r\n</button>\r\n} @else {\r\n<!-- When used as attribute directive, just render content -->\r\n<div class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n <!-- Left icon -->\r\n @if (leftIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-mr-1' : 'tw-mr-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Loading spinner -->\r\n @if (loading) {\r\n <cide-ele-spinner class=\"tw-inline-block tw-my-1\"\r\n [ngClass]=\"[size === 'xs' ? 'tw-mr-1' : 'tw-mr-2', {'cide-pill-disabled': (disabled || loading)}]\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n @if (label) {\r\n <span>{{ label }}</span>\r\n } @else {\r\n <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n <ng-content></ng-content>\r\n </span>\r\n }\r\n\r\n <!-- Right icon -->\r\n @if (rightIcon) {\r\n <span class=\"tw-icon-container\" [ngClass]=\"size === 'xs' ? 'tw-ml-1' : 'tw-ml-2'\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n </span>\r\n }\r\n\r\n <!-- Spacer for spinner when loading to maintain button width -->\r\n @if (loading) {\r\n <span class=\"tw-p-1\" [ngClass]=\"[size === 'xs' ? 'tw-w-4 tw-mr-1' : 'tw-w-6 tw-mr-2']\"></span>\r\n }\r\n</div>\r\n}", styles: [":host{position:relative;background-color:var(--cide-ele-brand-primary, #3b82f6);cursor:pointer;font-family:inherit;font-weight:500;outline:none;overflow:hidden;transition:all .2s ease-in-out;border:none;text-align:center;vertical-align:middle;text-decoration:none;line-height:1.5;letter-spacing:.025em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host:focus-visible{outline:2px solid var(--cide-ele-brand-primary, #3b82f6);outline-offset:2px;box-shadow:0 0 0 3px #3b82f64d}:host:hover:not(:disabled){background-color:var(--cide-ele-brand-primary-hover, #2563eb);transform:translateY(-1px)}:host:active:not(:disabled){transform:translateY(1px)}:host.cide-button-disabled{background-color:var(--cide-button-background-disabled, #9ca3af)!important;cursor:var(--cide-button-cursor-disabled, not-allowed)!important;opacity:.7;pointer-events:none;transform:none!important}:host.xs{font-size:.65rem;padding:0 .25rem;min-height:1.125rem;line-height:1}:host.xs .tw-icon-container.tw-mr-2,:host.xs .tw-icon-container.tw-mr-1{margin-right:.075rem!important}:host.xs .tw-icon-container.tw-ml-2,:host.xs .tw-icon-container.tw-ml-1{margin-left:.075rem!important}:host.xs .tw-icon-container i{font-size:.75rem!important}:host.xs cide-ele-spinner.tw-mr-2,:host.xs cide-ele-spinner.tw-mr-1{margin-right:.075rem!important}:host.xs cide-ele-spinner.tw-ml-2,:host.xs cide-ele-spinner.tw-ml-1{margin-left:.075rem!important}:host.sm{font-size:.875rem;padding:.25rem .5rem}:host.md{font-size:1rem;padding:.25rem .75rem}:host.lg{font-size:1.125rem;padding:.75rem 1rem}:host.xl{font-size:1.25rem;padding:1rem 1.5rem}:host.rounded{border-radius:.5rem}:host.pill{border-radius:9999px}:host.square{border-radius:0}:host.elevation-none{box-shadow:none}:host.elevation-low{box-shadow:0 1px 2px #0000000d}:host.elevation-medium{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host.elevation-high{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.ripple-effect{position:absolute;border-radius:50%;background-color:#fff6;transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}:host{color:#fff}:host.secondary{background-color:var(--cide-ele-brand-secondary, #4b5563);color:#fff}:host.secondary:hover:not(:disabled){background-color:var(--cide-ele-brand-secondary-hover, #374151)}:host.success{background-color:var(--cide-ele-success, #10b981);color:#fff}:host.success:hover:not(:disabled){background-color:var(--cide-ele-success, #10b981)}:host.danger{background-color:var(--cide-ele-error, #ef4444);color:#fff}:host.danger:hover:not(:disabled){background-color:var(--cide-ele-error, #ef4444)}:host.warning{background-color:var(--cide-ele-warning, #f59e0b);color:#fff}:host.warning:hover:not(:disabled){background-color:var(--cide-ele-warning, #f59e0b)}:host.info{background-color:var(--cide-ele-info, #3b82f6);color:#fff}:host.info:hover:not(:disabled){background-color:var(--cide-ele-info, #3b82f6)}:host.outline{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:1px solid var(--cide-ele-brand-primary, #3b82f6)}:host.outline:hover:not(:disabled){background-color:#3b82f60d}:host.outline.secondary{color:var(--cide-ele-brand-secondary, #4b5563);border-color:var(--cide-ele-brand-secondary, #4b5563)}:host.outline.success{color:var(--cide-ele-success, #10b981);border-color:var(--cide-ele-success, #10b981)}:host.outline.danger{color:var(--cide-ele-error, #ef4444);border-color:var(--cide-ele-error, #ef4444)}:host.outline.warning{color:var(--cide-ele-warning, #f59e0b);border-color:var(--cide-ele-warning, #f59e0b)}:host.outline.info{color:var(--cide-ele-info, #3b82f6);border-color:var(--cide-ele-info, #3b82f6)}:host.text{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;padding-left:.5rem;padding-right:.5rem}:host.text:hover:not(:disabled){background-color:#3b82f60d;text-decoration:underline}:host.text.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.text.success{color:var(--cide-ele-success, #10b981)}:host.text.danger{color:var(--cide-ele-error, #ef4444)}:host.text.warning{color:var(--cide-ele-warning, #f59e0b)}:host.text.info{color:var(--cide-ele-info, #3b82f6)}:host.link{background-color:transparent;color:var(--cide-ele-brand-primary, #3b82f6);border:none;text-decoration:underline;padding:0;font-weight:400}:host.link:hover:not(:disabled){color:var(--cide-ele-brand-primary-hover, #2563eb);text-decoration:underline}:host.link.secondary{color:var(--cide-ele-brand-secondary, #4b5563)}:host.link.success{color:var(--cide-ele-success, #10b981)}:host.link.danger{color:var(--cide-ele-error, #ef4444)}:host.link.warning{color:var(--cide-ele-warning, #f59e0b)}:host.link.info{color:var(--cide-ele-info, #3b82f6)}.tw-icon-container{display:inline-flex;align-items:center;justify-content:center}\n"] }]
|
|
7960
7960
|
}], ctorParameters: () => [{ type: CideElementsService }, { type: i2$1.Router }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { label: [{
|
|
7961
7961
|
type: Input
|
|
7962
7962
|
}], variant: [{
|