cloud-ide-element 1.1.260 → 1.1.261
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.
|
@@ -8012,7 +8012,7 @@ class CideEleButtonComponent {
|
|
|
8012
8012
|
}
|
|
8013
8013
|
}
|
|
8014
8014
|
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 });
|
|
8015
|
-
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", adaptive: "adaptive" }, 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.adaptive": "adaptive", "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\" [ngClass]=\"{\r\n 'tw-mr-1': size === 'xs', \r\n 'tw-mr-2': size !== 'xs', \r\n 'cide-pill-disabled': (disabled || loading)\r\n }\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n <span class=\"btn-label\">\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 </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\" [ngClass]=\"{\r\n 'tw-mr-1': size === 'xs', \r\n 'tw-mr-2': size !== 'xs', \r\n 'cide-pill-disabled': (disabled || loading)\r\n }\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n <span class=\"btn-label\">\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 </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}@media (max-width: 767px){:host.adaptive{padding:.25rem!important;min-width:unset!important;font-size:.875rem!important;line-height:1!important}:host.adaptive .tw-text-base{line-height:1!important}:host.adaptive .btn-label{display:none!important}:host.adaptive .tw-icon-container{margin:0!important}:host.adaptive cide-ele-spinner{margin:0!important}:host.adaptive .tw-p-1{display:none!important}}\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"] }] });
|
|
8015
|
+
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", adaptive: "adaptive" }, 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.adaptive": "adaptive", "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\" [ngClass]=\"{\r\n 'tw-mr-1': size === 'xs', \r\n 'tw-mr-2': size !== 'xs', \r\n 'cide-pill-disabled': (disabled || loading)\r\n }\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n <span class=\"btn-label\">\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 </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\" [ngClass]=\"{\r\n 'tw-mr-1': size === 'xs', \r\n 'tw-mr-2': size !== 'xs', \r\n 'cide-pill-disabled': (disabled || loading)\r\n }\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n <span class=\"btn-label\">\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 </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.6rem;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}@media (max-width: 767px){:host.adaptive{padding:.25rem!important;min-width:unset!important;font-size:.875rem!important;line-height:1!important}:host.adaptive .tw-text-base{line-height:1!important}:host.adaptive .btn-label{display:none!important}:host.adaptive .tw-icon-container{margin:0!important}:host.adaptive cide-ele-spinner{margin:0!important}:host.adaptive .tw-p-1{display:none!important}}\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"] }] });
|
|
8016
8016
|
}
|
|
8017
8017
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleButtonComponent, decorators: [{
|
|
8018
8018
|
type: Component,
|
|
@@ -8048,7 +8048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
8048
8048
|
'[attr.title]': 'tooltip',
|
|
8049
8049
|
'[class.adaptive]': 'adaptive',
|
|
8050
8050
|
'[class]': 'customClass'
|
|
8051
|
-
}, 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\" [ngClass]=\"{\r\n 'tw-mr-1': size === 'xs', \r\n 'tw-mr-2': size !== 'xs', \r\n 'cide-pill-disabled': (disabled || loading)\r\n }\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n <span class=\"btn-label\">\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 </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\" [ngClass]=\"{\r\n 'tw-mr-1': size === 'xs', \r\n 'tw-mr-2': size !== 'xs', \r\n 'cide-pill-disabled': (disabled || loading)\r\n }\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n <span class=\"btn-label\">\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 </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.
|
|
8051
|
+
}, 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\" [ngClass]=\"{\r\n 'tw-mr-1': size === 'xs', \r\n 'tw-mr-2': size !== 'xs', \r\n 'cide-pill-disabled': (disabled || loading)\r\n }\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n <span class=\"btn-label\">\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 </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\" [ngClass]=\"{\r\n 'tw-mr-1': size === 'xs', \r\n 'tw-mr-2': size !== 'xs', \r\n 'cide-pill-disabled': (disabled || loading)\r\n }\" size=\"xs\">\r\n </cide-ele-spinner>\r\n }\r\n\r\n <!-- Button label or content -->\r\n <span class=\"btn-label\">\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 </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.6rem;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}@media (max-width: 767px){:host.adaptive{padding:.25rem!important;min-width:unset!important;font-size:.875rem!important;line-height:1!important}:host.adaptive .tw-text-base{line-height:1!important}:host.adaptive .btn-label{display:none!important}:host.adaptive .tw-icon-container{margin:0!important}:host.adaptive cide-ele-spinner{margin:0!important}:host.adaptive .tw-p-1{display:none!important}}\n"] }]
|
|
8052
8052
|
}], ctorParameters: () => [{ type: CideElementsService }, { type: i2$1.Router }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { label: [{
|
|
8053
8053
|
type: Input
|
|
8054
8054
|
}], variant: [{
|