cloud-ide-element 1.1.116 → 1.1.119
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/cloud-ide-element.mjs +361 -3
- package/fesm2022/cloud-ide-element.mjs.map +1 -1
- package/index.d.ts +53 -2
- package/package.json +1 -1
|
@@ -8186,13 +8186,371 @@ class CideEleThemeToggleComponent {
|
|
|
8186
8186
|
}, 300);
|
|
8187
8187
|
}
|
|
8188
8188
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8189
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: CideEleThemeToggleComponent, isStandalone: true, selector: "cide-ele-theme-toggle", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"cide-theme-toggle-wrapper\" [class.size-small]=\"size() === 'small'\" [class.size-medium]=\"size() === 'medium'\" [class.size-large]=\"size() === 'large'\">\
|
|
8189
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: CideEleThemeToggleComponent, isStandalone: true, selector: "cide-ele-theme-toggle", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"cide-theme-toggle-wrapper\" [class.size-small]=\"size() === 'small'\" [class.size-medium]=\"size() === 'medium'\" [class.size-large]=\"size() === 'large'\">\n <button\n type=\"button\"\n class=\"cide-theme-toggle-button\"\n [class.is-dark]=\"isDarkMode()\"\n [class.is-animating]=\"isAnimating()\"\n (click)=\"toggleTheme()\"\n [attr.aria-label]=\"isDarkMode() ? 'Switch to light mode' : 'Switch to dark mode'\"\n [attr.aria-pressed]=\"isDarkMode()\">\n \n <!-- Toggle Track -->\n <span class=\"cide-theme-toggle-track\" [class]=\"toggleBgColor()\">\n <!-- Sun Icon (Light Mode) -->\n <span class=\"cide-theme-toggle-icon sun-icon\" [class.hidden]=\"isDarkMode()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"currentColor\"/>\n <path d=\"M12 2V4M12 20V22M4 12H2M22 12H20M19.07 4.93L17.66 6.34M6.34 17.66L4.93 19.07M19.07 19.07L17.66 17.66M6.34 6.34L4.93 4.93\" \n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n \n <!-- Moon Icon (Dark Mode) -->\n <span class=\"cide-theme-toggle-icon moon-icon\" [class.hidden]=\"!isDarkMode()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" \n stroke=\"currentColor\" stroke-width=\"2\" fill=\"currentColor\"/>\n </svg>\n </span>\n </span>\n \n <!-- Toggle Thumb (Slider) -->\n <span class=\"cide-theme-toggle-thumb\" [style.transform]=\"togglePosition()\">\n </span>\n </button>\n</div>\n\n\n\n", styles: [".cide-theme-toggle-wrapper{display:inline-flex;align-items:center;justify-content:center}.cide-theme-toggle-button{position:relative;padding:0;border:none;background:transparent;cursor:pointer;outline:none;transition:all .3s cubic-bezier(.4,0,.2,1);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.cide-theme-toggle-button:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px;border-radius:20px}.cide-theme-toggle-wrapper.size-small .cide-theme-toggle-button{width:36px;height:22px}.cide-theme-toggle-wrapper.size-small .cide-theme-toggle-track{border-radius:11px;padding:0 3px}.cide-theme-toggle-wrapper.size-small .cide-theme-toggle-icon{width:14px;height:14px}.cide-theme-toggle-wrapper.size-small .cide-theme-toggle-icon svg{width:12px;height:12px}.cide-theme-toggle-wrapper.size-small .cide-theme-toggle-thumb{top:1.5px;left:1.5px;width:19px;height:19px}.cide-theme-toggle-wrapper.size-medium .cide-theme-toggle-button{width:52px;height:32px}.cide-theme-toggle-wrapper.size-medium .cide-theme-toggle-track{border-radius:16px;padding:0 4px}.cide-theme-toggle-wrapper.size-medium .cide-theme-toggle-icon{width:20px;height:20px}.cide-theme-toggle-wrapper.size-medium .cide-theme-toggle-icon svg{width:16px;height:16px}.cide-theme-toggle-wrapper.size-medium .cide-theme-toggle-thumb{top:2px;left:2px;width:28px;height:28px}.cide-theme-toggle-wrapper.size-large .cide-theme-toggle-button{width:68px;height:42px}.cide-theme-toggle-wrapper.size-large .cide-theme-toggle-track{border-radius:21px;padding:0 5px}.cide-theme-toggle-wrapper.size-large .cide-theme-toggle-icon{width:26px;height:26px}.cide-theme-toggle-wrapper.size-large .cide-theme-toggle-icon svg{width:20px;height:20px}.cide-theme-toggle-wrapper.size-large .cide-theme-toggle-thumb{top:3px;left:3px;width:36px;height:36px}.cide-theme-toggle-track{position:absolute;top:0;left:0;width:100%;height:100%;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:space-between;box-shadow:inset 0 2px 4px #0000001a,0 1px 2px #0000000d}.is-dark .cide-theme-toggle-track{box-shadow:inset 0 2px 4px #0003,0 1px 2px #0000001a}.cide-theme-toggle-icon{display:flex;align-items:center;justify-content:center;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);opacity:1}.cide-theme-toggle-icon.hidden{opacity:0;width:0;transform:scale(0)}.cide-theme-toggle-icon svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}.cide-theme-toggle-icon.sun-icon{color:#fbbf24}.cide-theme-toggle-icon.moon-icon{color:#e0e7ff}.cide-theme-toggle-thumb{position:absolute;background:#fff;border-radius:50%;box-shadow:0 2px 4px #0003,0 1px 2px #0000001a;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1;background:linear-gradient(180deg,#fff,#f9fafb)}.is-dark .cide-theme-toggle-thumb{background:linear-gradient(180deg,#f3f4f6,#e5e7eb);box-shadow:0 2px 4px #0000004d,0 1px 2px #00000026}.is-animating .cide-theme-toggle-thumb{transition:transform .3s cubic-bezier(.4,0,.2,1)}.cide-theme-toggle-button:hover .cide-theme-toggle-thumb{box-shadow:0 3px 6px #00000040,0 2px 4px #00000026}.is-dark .cide-theme-toggle-button:hover .cide-theme-toggle-thumb{box-shadow:0 3px 6px #0006,0 2px 4px #0003}.cide-theme-toggle-button:hover .cide-theme-toggle-track{box-shadow:inset 0 2px 4px #00000026,0 2px 4px #0000001a}.is-dark .cide-theme-toggle-button:hover .cide-theme-toggle-track{box-shadow:inset 0 2px 4px #00000040,0 2px 4px #00000026}.cide-theme-toggle-button:active .cide-theme-toggle-thumb{transform:scale(.95)}.cide-theme-toggle-button:disabled{opacity:.5;cursor:not-allowed}.cide-theme-toggle-button:disabled:hover .cide-theme-toggle-thumb,.cide-theme-toggle-button:disabled:hover .cide-theme-toggle-track{box-shadow:none}@media (prefers-color-scheme: dark){.cide-theme-toggle-thumb{background:linear-gradient(180deg,#f3f4f6,#e5e7eb)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
8190
8190
|
}
|
|
8191
8191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleThemeToggleComponent, decorators: [{
|
|
8192
8192
|
type: Component,
|
|
8193
|
-
args: [{ selector: 'cide-ele-theme-toggle', standalone: true, imports: [CommonModule], template: "<div class=\"cide-theme-toggle-wrapper\" [class.size-small]=\"size() === 'small'\" [class.size-medium]=\"size() === 'medium'\" [class.size-large]=\"size() === 'large'\">\
|
|
8193
|
+
args: [{ selector: 'cide-ele-theme-toggle', standalone: true, imports: [CommonModule], template: "<div class=\"cide-theme-toggle-wrapper\" [class.size-small]=\"size() === 'small'\" [class.size-medium]=\"size() === 'medium'\" [class.size-large]=\"size() === 'large'\">\n <button\n type=\"button\"\n class=\"cide-theme-toggle-button\"\n [class.is-dark]=\"isDarkMode()\"\n [class.is-animating]=\"isAnimating()\"\n (click)=\"toggleTheme()\"\n [attr.aria-label]=\"isDarkMode() ? 'Switch to light mode' : 'Switch to dark mode'\"\n [attr.aria-pressed]=\"isDarkMode()\">\n \n <!-- Toggle Track -->\n <span class=\"cide-theme-toggle-track\" [class]=\"toggleBgColor()\">\n <!-- Sun Icon (Light Mode) -->\n <span class=\"cide-theme-toggle-icon sun-icon\" [class.hidden]=\"isDarkMode()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"currentColor\"/>\n <path d=\"M12 2V4M12 20V22M4 12H2M22 12H20M19.07 4.93L17.66 6.34M6.34 17.66L4.93 19.07M19.07 19.07L17.66 17.66M6.34 6.34L4.93 4.93\" \n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n \n <!-- Moon Icon (Dark Mode) -->\n <span class=\"cide-theme-toggle-icon moon-icon\" [class.hidden]=\"!isDarkMode()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" \n stroke=\"currentColor\" stroke-width=\"2\" fill=\"currentColor\"/>\n </svg>\n </span>\n </span>\n \n <!-- Toggle Thumb (Slider) -->\n <span class=\"cide-theme-toggle-thumb\" [style.transform]=\"togglePosition()\">\n </span>\n </button>\n</div>\n\n\n\n", styles: [".cide-theme-toggle-wrapper{display:inline-flex;align-items:center;justify-content:center}.cide-theme-toggle-button{position:relative;padding:0;border:none;background:transparent;cursor:pointer;outline:none;transition:all .3s cubic-bezier(.4,0,.2,1);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.cide-theme-toggle-button:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px;border-radius:20px}.cide-theme-toggle-wrapper.size-small .cide-theme-toggle-button{width:36px;height:22px}.cide-theme-toggle-wrapper.size-small .cide-theme-toggle-track{border-radius:11px;padding:0 3px}.cide-theme-toggle-wrapper.size-small .cide-theme-toggle-icon{width:14px;height:14px}.cide-theme-toggle-wrapper.size-small .cide-theme-toggle-icon svg{width:12px;height:12px}.cide-theme-toggle-wrapper.size-small .cide-theme-toggle-thumb{top:1.5px;left:1.5px;width:19px;height:19px}.cide-theme-toggle-wrapper.size-medium .cide-theme-toggle-button{width:52px;height:32px}.cide-theme-toggle-wrapper.size-medium .cide-theme-toggle-track{border-radius:16px;padding:0 4px}.cide-theme-toggle-wrapper.size-medium .cide-theme-toggle-icon{width:20px;height:20px}.cide-theme-toggle-wrapper.size-medium .cide-theme-toggle-icon svg{width:16px;height:16px}.cide-theme-toggle-wrapper.size-medium .cide-theme-toggle-thumb{top:2px;left:2px;width:28px;height:28px}.cide-theme-toggle-wrapper.size-large .cide-theme-toggle-button{width:68px;height:42px}.cide-theme-toggle-wrapper.size-large .cide-theme-toggle-track{border-radius:21px;padding:0 5px}.cide-theme-toggle-wrapper.size-large .cide-theme-toggle-icon{width:26px;height:26px}.cide-theme-toggle-wrapper.size-large .cide-theme-toggle-icon svg{width:20px;height:20px}.cide-theme-toggle-wrapper.size-large .cide-theme-toggle-thumb{top:3px;left:3px;width:36px;height:36px}.cide-theme-toggle-track{position:absolute;top:0;left:0;width:100%;height:100%;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:space-between;box-shadow:inset 0 2px 4px #0000001a,0 1px 2px #0000000d}.is-dark .cide-theme-toggle-track{box-shadow:inset 0 2px 4px #0003,0 1px 2px #0000001a}.cide-theme-toggle-icon{display:flex;align-items:center;justify-content:center;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);opacity:1}.cide-theme-toggle-icon.hidden{opacity:0;width:0;transform:scale(0)}.cide-theme-toggle-icon svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}.cide-theme-toggle-icon.sun-icon{color:#fbbf24}.cide-theme-toggle-icon.moon-icon{color:#e0e7ff}.cide-theme-toggle-thumb{position:absolute;background:#fff;border-radius:50%;box-shadow:0 2px 4px #0003,0 1px 2px #0000001a;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1;background:linear-gradient(180deg,#fff,#f9fafb)}.is-dark .cide-theme-toggle-thumb{background:linear-gradient(180deg,#f3f4f6,#e5e7eb);box-shadow:0 2px 4px #0000004d,0 1px 2px #00000026}.is-animating .cide-theme-toggle-thumb{transition:transform .3s cubic-bezier(.4,0,.2,1)}.cide-theme-toggle-button:hover .cide-theme-toggle-thumb{box-shadow:0 3px 6px #00000040,0 2px 4px #00000026}.is-dark .cide-theme-toggle-button:hover .cide-theme-toggle-thumb{box-shadow:0 3px 6px #0006,0 2px 4px #0003}.cide-theme-toggle-button:hover .cide-theme-toggle-track{box-shadow:inset 0 2px 4px #00000026,0 2px 4px #0000001a}.is-dark .cide-theme-toggle-button:hover .cide-theme-toggle-track{box-shadow:inset 0 2px 4px #00000040,0 2px 4px #00000026}.cide-theme-toggle-button:active .cide-theme-toggle-thumb{transform:scale(.95)}.cide-theme-toggle-button:disabled{opacity:.5;cursor:not-allowed}.cide-theme-toggle-button:disabled:hover .cide-theme-toggle-thumb,.cide-theme-toggle-button:disabled:hover .cide-theme-toggle-track{box-shadow:none}@media (prefers-color-scheme: dark){.cide-theme-toggle-thumb{background:linear-gradient(180deg,#f3f4f6,#e5e7eb)}}\n"] }]
|
|
8194
8194
|
}] });
|
|
8195
8195
|
|
|
8196
|
+
class CideEleCardComponent {
|
|
8197
|
+
title;
|
|
8198
|
+
subtitle;
|
|
8199
|
+
cardConfig = {
|
|
8200
|
+
collapsible: true,
|
|
8201
|
+
minimizable: false,
|
|
8202
|
+
maximizable: false,
|
|
8203
|
+
removable: false,
|
|
8204
|
+
defaultState: 'expanded',
|
|
8205
|
+
showHeader: true,
|
|
8206
|
+
showFooter: false,
|
|
8207
|
+
variant: 'default',
|
|
8208
|
+
size: 'md',
|
|
8209
|
+
shadow: true,
|
|
8210
|
+
rounded: true,
|
|
8211
|
+
bordered: true
|
|
8212
|
+
};
|
|
8213
|
+
stateChange = new EventEmitter();
|
|
8214
|
+
collapsed = new EventEmitter();
|
|
8215
|
+
minimized = new EventEmitter();
|
|
8216
|
+
maximized = new EventEmitter();
|
|
8217
|
+
removed = new EventEmitter();
|
|
8218
|
+
headerClick = new EventEmitter();
|
|
8219
|
+
currentState = signal('expanded', ...(ngDevMode ? [{ debugName: "currentState" }] : []));
|
|
8220
|
+
configSignal = signal({
|
|
8221
|
+
collapsible: true,
|
|
8222
|
+
minimizable: false,
|
|
8223
|
+
maximizable: false,
|
|
8224
|
+
removable: false,
|
|
8225
|
+
defaultState: 'expanded',
|
|
8226
|
+
showHeader: true,
|
|
8227
|
+
showFooter: false,
|
|
8228
|
+
variant: 'default',
|
|
8229
|
+
size: 'md',
|
|
8230
|
+
shadow: true,
|
|
8231
|
+
rounded: true,
|
|
8232
|
+
bordered: true
|
|
8233
|
+
}, ...(ngDevMode ? [{ debugName: "configSignal" }] : []));
|
|
8234
|
+
// Computed signals for state checks
|
|
8235
|
+
isCollapsed = computed(() => this.currentState() === 'collapsed', ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
|
|
8236
|
+
isMinimized = computed(() => this.currentState() === 'minimized', ...(ngDevMode ? [{ debugName: "isMinimized" }] : []));
|
|
8237
|
+
isMaximized = computed(() => this.currentState() === 'maximized', ...(ngDevMode ? [{ debugName: "isMaximized" }] : []));
|
|
8238
|
+
config = computed(() => this.configSignal(), ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
8239
|
+
ngOnInit() {
|
|
8240
|
+
this.updateConfig();
|
|
8241
|
+
}
|
|
8242
|
+
ngOnChanges(changes) {
|
|
8243
|
+
if (changes['cardConfig']) {
|
|
8244
|
+
this.updateConfig();
|
|
8245
|
+
}
|
|
8246
|
+
}
|
|
8247
|
+
updateConfig() {
|
|
8248
|
+
// Merge with defaults
|
|
8249
|
+
const mergedConfig = {
|
|
8250
|
+
collapsible: true,
|
|
8251
|
+
minimizable: false,
|
|
8252
|
+
maximizable: false,
|
|
8253
|
+
removable: false,
|
|
8254
|
+
defaultState: 'expanded',
|
|
8255
|
+
showHeader: true,
|
|
8256
|
+
showFooter: false,
|
|
8257
|
+
variant: 'default',
|
|
8258
|
+
size: 'md',
|
|
8259
|
+
shadow: true,
|
|
8260
|
+
rounded: true,
|
|
8261
|
+
bordered: true,
|
|
8262
|
+
...this.cardConfig
|
|
8263
|
+
};
|
|
8264
|
+
this.configSignal.set(mergedConfig);
|
|
8265
|
+
// Set default state if not already set
|
|
8266
|
+
if (this.currentState() === 'expanded' && mergedConfig.defaultState) {
|
|
8267
|
+
this.currentState.set(mergedConfig.defaultState);
|
|
8268
|
+
}
|
|
8269
|
+
}
|
|
8270
|
+
toggleCollapse(event) {
|
|
8271
|
+
event.stopPropagation();
|
|
8272
|
+
if (!this.configSignal().collapsible)
|
|
8273
|
+
return;
|
|
8274
|
+
const newState = this.isCollapsed() ? 'expanded' : 'collapsed';
|
|
8275
|
+
this.setState(newState);
|
|
8276
|
+
}
|
|
8277
|
+
toggleMinimize(event) {
|
|
8278
|
+
event.stopPropagation();
|
|
8279
|
+
if (!this.configSignal().minimizable)
|
|
8280
|
+
return;
|
|
8281
|
+
const newState = this.isMinimized() ? 'expanded' : 'minimized';
|
|
8282
|
+
this.setState(newState);
|
|
8283
|
+
}
|
|
8284
|
+
toggleMaximize(event) {
|
|
8285
|
+
event.stopPropagation();
|
|
8286
|
+
if (!this.configSignal().maximizable)
|
|
8287
|
+
return;
|
|
8288
|
+
const newState = this.isMaximized() ? 'expanded' : 'maximized';
|
|
8289
|
+
this.setState(newState);
|
|
8290
|
+
}
|
|
8291
|
+
remove(event) {
|
|
8292
|
+
event.stopPropagation();
|
|
8293
|
+
if (!this.configSignal().removable)
|
|
8294
|
+
return;
|
|
8295
|
+
this.removed.emit();
|
|
8296
|
+
}
|
|
8297
|
+
onHeaderClick() {
|
|
8298
|
+
if (this.configSignal().collapsible && this.configSignal().defaultState !== 'collapsed') {
|
|
8299
|
+
this.toggleCollapse(new Event('click'));
|
|
8300
|
+
}
|
|
8301
|
+
this.headerClick.emit();
|
|
8302
|
+
}
|
|
8303
|
+
setState(newState) {
|
|
8304
|
+
this.currentState.set(newState);
|
|
8305
|
+
this.stateChange.emit(newState);
|
|
8306
|
+
this.collapsed.emit(newState === 'collapsed');
|
|
8307
|
+
this.minimized.emit(newState === 'minimized');
|
|
8308
|
+
this.maximized.emit(newState === 'maximized');
|
|
8309
|
+
}
|
|
8310
|
+
// Public methods for programmatic control
|
|
8311
|
+
expand() {
|
|
8312
|
+
this.setState('expanded');
|
|
8313
|
+
}
|
|
8314
|
+
collapse() {
|
|
8315
|
+
if (this.configSignal().collapsible) {
|
|
8316
|
+
this.setState('collapsed');
|
|
8317
|
+
}
|
|
8318
|
+
}
|
|
8319
|
+
minimize() {
|
|
8320
|
+
if (this.configSignal().minimizable) {
|
|
8321
|
+
this.setState('minimized');
|
|
8322
|
+
}
|
|
8323
|
+
}
|
|
8324
|
+
maximize() {
|
|
8325
|
+
if (this.configSignal().maximizable) {
|
|
8326
|
+
this.setState('maximized');
|
|
8327
|
+
}
|
|
8328
|
+
}
|
|
8329
|
+
getState() {
|
|
8330
|
+
return this.currentState();
|
|
8331
|
+
}
|
|
8332
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleCardComponent, isStandalone: true, selector: "cide-ele-card", inputs: { title: "title", subtitle: "subtitle", cardConfig: "cardConfig" }, outputs: { stateChange: "stateChange", collapsed: "collapsed", minimized: "minimized", maximized: "maximized", removed: "removed", headerClick: "headerClick" }, usesOnChanges: true, ngImport: i0, template: `
|
|
8334
|
+
<div
|
|
8335
|
+
class="cide-card"
|
|
8336
|
+
[class.cide-card-collapsed]="isCollapsed()"
|
|
8337
|
+
[class.cide-card-minimized]="isMinimized()"
|
|
8338
|
+
[class.cide-card-maximized]="isMaximized()"
|
|
8339
|
+
[class.cide-card-outlined]="config().variant === 'outlined'"
|
|
8340
|
+
[class.cide-card-elevated]="config().variant === 'elevated'"
|
|
8341
|
+
[class.cide-card-flat]="config().variant === 'flat'"
|
|
8342
|
+
[class.cide-card-sm]="config().size === 'sm'"
|
|
8343
|
+
[class.cide-card-md]="config().size === 'md'"
|
|
8344
|
+
[class.cide-card-lg]="config().size === 'lg'"
|
|
8345
|
+
[class.cide-card-shadow]="config().shadow !== false"
|
|
8346
|
+
[class.cide-card-rounded]="config().rounded !== false"
|
|
8347
|
+
[class.cide-card-bordered]="config().bordered !== false"
|
|
8348
|
+
[style.max-height]="isMinimized() ? '60px' : (isMaximized() ? '100vh' : 'none')"
|
|
8349
|
+
[style.width]="isMaximized() ? '100vw' : 'auto'"
|
|
8350
|
+
[style.position]="isMaximized() ? 'fixed' : 'relative'"
|
|
8351
|
+
[style.z-index]="isMaximized() ? '9999' : 'auto'"
|
|
8352
|
+
[style.top]="isMaximized() ? '0' : 'auto'"
|
|
8353
|
+
[style.left]="isMaximized() ? '0' : 'auto'"
|
|
8354
|
+
[style.right]="isMaximized() ? '0' : 'auto'"
|
|
8355
|
+
[style.bottom]="isMaximized() ? '0' : 'auto'"
|
|
8356
|
+
>
|
|
8357
|
+
<!-- Header -->
|
|
8358
|
+
@if (config().showHeader !== false) {
|
|
8359
|
+
<div class="cide-card-header" (click)="onHeaderClick()">
|
|
8360
|
+
<div class="cide-card-header-content">
|
|
8361
|
+
@if (title) {
|
|
8362
|
+
<h3 class="cide-card-title">{{ title }}</h3>
|
|
8363
|
+
}
|
|
8364
|
+
@if (subtitle) {
|
|
8365
|
+
<p class="cide-card-subtitle">{{ subtitle }}</p>
|
|
8366
|
+
}
|
|
8367
|
+
<ng-content select="[card-header]"></ng-content>
|
|
8368
|
+
</div>
|
|
8369
|
+
<div class="cide-card-actions">
|
|
8370
|
+
<ng-content select="[card-actions]"></ng-content>
|
|
8371
|
+
@if (config().collapsible) {
|
|
8372
|
+
<button
|
|
8373
|
+
type="button"
|
|
8374
|
+
class="cide-card-action-btn"
|
|
8375
|
+
(click)="toggleCollapse($event)"
|
|
8376
|
+
[attr.aria-label]="isCollapsed() ? 'Expand card' : 'Collapse card'"
|
|
8377
|
+
[title]="isCollapsed() ? 'Expand' : 'Collapse'">
|
|
8378
|
+
<cide-ele-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>
|
|
8379
|
+
</button>
|
|
8380
|
+
}
|
|
8381
|
+
@if (config().minimizable) {
|
|
8382
|
+
<button
|
|
8383
|
+
type="button"
|
|
8384
|
+
class="cide-card-action-btn"
|
|
8385
|
+
(click)="toggleMinimize($event)"
|
|
8386
|
+
[attr.aria-label]="isMinimized() ? 'Restore card' : 'Minimize card'"
|
|
8387
|
+
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
8388
|
+
<cide-ele-icon>{{ isMinimized() ? 'unfold_more' : 'unfold_less' }}</cide-ele-icon>
|
|
8389
|
+
</button>
|
|
8390
|
+
}
|
|
8391
|
+
@if (config().maximizable) {
|
|
8392
|
+
<button
|
|
8393
|
+
type="button"
|
|
8394
|
+
class="cide-card-action-btn"
|
|
8395
|
+
(click)="toggleMaximize($event)"
|
|
8396
|
+
[attr.aria-label]="isMaximized() ? 'Restore card' : 'Maximize card'"
|
|
8397
|
+
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
8398
|
+
<cide-ele-icon>{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
|
|
8399
|
+
</button>
|
|
8400
|
+
}
|
|
8401
|
+
@if (config().removable) {
|
|
8402
|
+
<button
|
|
8403
|
+
type="button"
|
|
8404
|
+
class="cide-card-action-btn cide-card-action-remove"
|
|
8405
|
+
(click)="remove($event)"
|
|
8406
|
+
aria-label="Remove card"
|
|
8407
|
+
title="Remove">
|
|
8408
|
+
<cide-ele-icon>close</cide-ele-icon>
|
|
8409
|
+
</button>
|
|
8410
|
+
}
|
|
8411
|
+
</div>
|
|
8412
|
+
</div>
|
|
8413
|
+
}
|
|
8414
|
+
|
|
8415
|
+
<!-- Content -->
|
|
8416
|
+
<div
|
|
8417
|
+
class="cide-card-content"
|
|
8418
|
+
[class.cide-card-content-collapsed]="isCollapsed()"
|
|
8419
|
+
[class.cide-card-content-minimized]="isMinimized()"
|
|
8420
|
+
>
|
|
8421
|
+
<ng-content></ng-content>
|
|
8422
|
+
</div>
|
|
8423
|
+
|
|
8424
|
+
<!-- Footer -->
|
|
8425
|
+
@if (config().showFooter && !isMinimized()) {
|
|
8426
|
+
<div class="cide-card-footer">
|
|
8427
|
+
<ng-content select="[card-footer]"></ng-content>
|
|
8428
|
+
</div>
|
|
8429
|
+
}
|
|
8430
|
+
</div>
|
|
8431
|
+
`, isInline: true, styles: [".cide-card{display:flex;flex-direction:column;background:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative}.cide-card-rounded{border-radius:.75rem}.cide-card-bordered{border:1px solid #e5e7eb}.cide-card-shadow{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.cide-card-outlined{border:2px solid #e5e7eb;box-shadow:none}.cide-card-elevated{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.cide-card-flat{border:none;box-shadow:none;background:transparent}.cide-card-sm{font-size:.875rem}.cide-card-md{font-size:1rem}.cide-card-lg{font-size:1.125rem}.cide-card-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:linear-gradient(to right,#f0f9ff,#e0f2fe);border-bottom:1px solid #e5e7eb;min-height:3.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.cide-card-header-content{flex:1;min-width:0}.cide-card-title{margin:0;font-size:1rem;font-weight:600;color:#1e40af;line-height:1.5}.cide-card-subtitle{margin:.25rem 0 0;font-size:.875rem;color:#64748b;line-height:1.4}.cide-card-actions{display:flex;align-items:center;gap:.5rem;margin-left:1rem;flex-shrink:0}.cide-card-action-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:transparent;border:none;border-radius:.375rem;color:#64748b;cursor:pointer;transition:all .2s ease}.cide-card-action-btn:hover{background:#0000000d;color:#1e40af}.cide-card-action-btn:active{transform:scale(.95)}.cide-card-action-remove:hover{background:#ef44441a;color:#dc2626}.cide-card-content{padding:1.25rem;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);max-height:none}.cide-card-content-collapsed{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}.cide-card-content-minimized{display:none}.cide-card-collapsed .cide-card-content{max-height:0;padding-top:0;padding-bottom:0}.cide-card-minimized{max-height:60px}.cide-card-minimized .cide-card-content,.cide-card-minimized .cide-card-footer{display:none}.cide-card-maximized{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;border-radius:0;margin:0}.cide-card-maximized .cide-card-content{flex:1;overflow-y:auto}.cide-card-footer{padding:1rem 1.25rem;background:#f9fafb;border-top:1px solid #e5e7eb;margin-top:auto}@media (max-width: 640px){.cide-card-header{padding:.75rem 1rem;flex-wrap:wrap}.cide-card-content{padding:1rem}.cide-card-footer{padding:.75rem 1rem}.cide-card-actions{margin-left:.5rem;gap:.25rem}.cide-card-action-btn{width:1.75rem;height:1.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
8432
|
+
}
|
|
8433
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleCardComponent, decorators: [{
|
|
8434
|
+
type: Component,
|
|
8435
|
+
args: [{ selector: 'cide-ele-card', standalone: true, imports: [CommonModule, CideIconComponent], template: `
|
|
8436
|
+
<div
|
|
8437
|
+
class="cide-card"
|
|
8438
|
+
[class.cide-card-collapsed]="isCollapsed()"
|
|
8439
|
+
[class.cide-card-minimized]="isMinimized()"
|
|
8440
|
+
[class.cide-card-maximized]="isMaximized()"
|
|
8441
|
+
[class.cide-card-outlined]="config().variant === 'outlined'"
|
|
8442
|
+
[class.cide-card-elevated]="config().variant === 'elevated'"
|
|
8443
|
+
[class.cide-card-flat]="config().variant === 'flat'"
|
|
8444
|
+
[class.cide-card-sm]="config().size === 'sm'"
|
|
8445
|
+
[class.cide-card-md]="config().size === 'md'"
|
|
8446
|
+
[class.cide-card-lg]="config().size === 'lg'"
|
|
8447
|
+
[class.cide-card-shadow]="config().shadow !== false"
|
|
8448
|
+
[class.cide-card-rounded]="config().rounded !== false"
|
|
8449
|
+
[class.cide-card-bordered]="config().bordered !== false"
|
|
8450
|
+
[style.max-height]="isMinimized() ? '60px' : (isMaximized() ? '100vh' : 'none')"
|
|
8451
|
+
[style.width]="isMaximized() ? '100vw' : 'auto'"
|
|
8452
|
+
[style.position]="isMaximized() ? 'fixed' : 'relative'"
|
|
8453
|
+
[style.z-index]="isMaximized() ? '9999' : 'auto'"
|
|
8454
|
+
[style.top]="isMaximized() ? '0' : 'auto'"
|
|
8455
|
+
[style.left]="isMaximized() ? '0' : 'auto'"
|
|
8456
|
+
[style.right]="isMaximized() ? '0' : 'auto'"
|
|
8457
|
+
[style.bottom]="isMaximized() ? '0' : 'auto'"
|
|
8458
|
+
>
|
|
8459
|
+
<!-- Header -->
|
|
8460
|
+
@if (config().showHeader !== false) {
|
|
8461
|
+
<div class="cide-card-header" (click)="onHeaderClick()">
|
|
8462
|
+
<div class="cide-card-header-content">
|
|
8463
|
+
@if (title) {
|
|
8464
|
+
<h3 class="cide-card-title">{{ title }}</h3>
|
|
8465
|
+
}
|
|
8466
|
+
@if (subtitle) {
|
|
8467
|
+
<p class="cide-card-subtitle">{{ subtitle }}</p>
|
|
8468
|
+
}
|
|
8469
|
+
<ng-content select="[card-header]"></ng-content>
|
|
8470
|
+
</div>
|
|
8471
|
+
<div class="cide-card-actions">
|
|
8472
|
+
<ng-content select="[card-actions]"></ng-content>
|
|
8473
|
+
@if (config().collapsible) {
|
|
8474
|
+
<button
|
|
8475
|
+
type="button"
|
|
8476
|
+
class="cide-card-action-btn"
|
|
8477
|
+
(click)="toggleCollapse($event)"
|
|
8478
|
+
[attr.aria-label]="isCollapsed() ? 'Expand card' : 'Collapse card'"
|
|
8479
|
+
[title]="isCollapsed() ? 'Expand' : 'Collapse'">
|
|
8480
|
+
<cide-ele-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>
|
|
8481
|
+
</button>
|
|
8482
|
+
}
|
|
8483
|
+
@if (config().minimizable) {
|
|
8484
|
+
<button
|
|
8485
|
+
type="button"
|
|
8486
|
+
class="cide-card-action-btn"
|
|
8487
|
+
(click)="toggleMinimize($event)"
|
|
8488
|
+
[attr.aria-label]="isMinimized() ? 'Restore card' : 'Minimize card'"
|
|
8489
|
+
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
8490
|
+
<cide-ele-icon>{{ isMinimized() ? 'unfold_more' : 'unfold_less' }}</cide-ele-icon>
|
|
8491
|
+
</button>
|
|
8492
|
+
}
|
|
8493
|
+
@if (config().maximizable) {
|
|
8494
|
+
<button
|
|
8495
|
+
type="button"
|
|
8496
|
+
class="cide-card-action-btn"
|
|
8497
|
+
(click)="toggleMaximize($event)"
|
|
8498
|
+
[attr.aria-label]="isMaximized() ? 'Restore card' : 'Maximize card'"
|
|
8499
|
+
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
8500
|
+
<cide-ele-icon>{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
|
|
8501
|
+
</button>
|
|
8502
|
+
}
|
|
8503
|
+
@if (config().removable) {
|
|
8504
|
+
<button
|
|
8505
|
+
type="button"
|
|
8506
|
+
class="cide-card-action-btn cide-card-action-remove"
|
|
8507
|
+
(click)="remove($event)"
|
|
8508
|
+
aria-label="Remove card"
|
|
8509
|
+
title="Remove">
|
|
8510
|
+
<cide-ele-icon>close</cide-ele-icon>
|
|
8511
|
+
</button>
|
|
8512
|
+
}
|
|
8513
|
+
</div>
|
|
8514
|
+
</div>
|
|
8515
|
+
}
|
|
8516
|
+
|
|
8517
|
+
<!-- Content -->
|
|
8518
|
+
<div
|
|
8519
|
+
class="cide-card-content"
|
|
8520
|
+
[class.cide-card-content-collapsed]="isCollapsed()"
|
|
8521
|
+
[class.cide-card-content-minimized]="isMinimized()"
|
|
8522
|
+
>
|
|
8523
|
+
<ng-content></ng-content>
|
|
8524
|
+
</div>
|
|
8525
|
+
|
|
8526
|
+
<!-- Footer -->
|
|
8527
|
+
@if (config().showFooter && !isMinimized()) {
|
|
8528
|
+
<div class="cide-card-footer">
|
|
8529
|
+
<ng-content select="[card-footer]"></ng-content>
|
|
8530
|
+
</div>
|
|
8531
|
+
}
|
|
8532
|
+
</div>
|
|
8533
|
+
`, styles: [".cide-card{display:flex;flex-direction:column;background:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative}.cide-card-rounded{border-radius:.75rem}.cide-card-bordered{border:1px solid #e5e7eb}.cide-card-shadow{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.cide-card-outlined{border:2px solid #e5e7eb;box-shadow:none}.cide-card-elevated{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.cide-card-flat{border:none;box-shadow:none;background:transparent}.cide-card-sm{font-size:.875rem}.cide-card-md{font-size:1rem}.cide-card-lg{font-size:1.125rem}.cide-card-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:linear-gradient(to right,#f0f9ff,#e0f2fe);border-bottom:1px solid #e5e7eb;min-height:3.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.cide-card-header-content{flex:1;min-width:0}.cide-card-title{margin:0;font-size:1rem;font-weight:600;color:#1e40af;line-height:1.5}.cide-card-subtitle{margin:.25rem 0 0;font-size:.875rem;color:#64748b;line-height:1.4}.cide-card-actions{display:flex;align-items:center;gap:.5rem;margin-left:1rem;flex-shrink:0}.cide-card-action-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:transparent;border:none;border-radius:.375rem;color:#64748b;cursor:pointer;transition:all .2s ease}.cide-card-action-btn:hover{background:#0000000d;color:#1e40af}.cide-card-action-btn:active{transform:scale(.95)}.cide-card-action-remove:hover{background:#ef44441a;color:#dc2626}.cide-card-content{padding:1.25rem;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);max-height:none}.cide-card-content-collapsed{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}.cide-card-content-minimized{display:none}.cide-card-collapsed .cide-card-content{max-height:0;padding-top:0;padding-bottom:0}.cide-card-minimized{max-height:60px}.cide-card-minimized .cide-card-content,.cide-card-minimized .cide-card-footer{display:none}.cide-card-maximized{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;border-radius:0;margin:0}.cide-card-maximized .cide-card-content{flex:1;overflow-y:auto}.cide-card-footer{padding:1rem 1.25rem;background:#f9fafb;border-top:1px solid #e5e7eb;margin-top:auto}@media (max-width: 640px){.cide-card-header{padding:.75rem 1rem;flex-wrap:wrap}.cide-card-content{padding:1rem}.cide-card-footer{padding:.75rem 1rem}.cide-card-actions{margin-left:.5rem;gap:.25rem}.cide-card-action-btn{width:1.75rem;height:1.75rem}}\n"] }]
|
|
8534
|
+
}], propDecorators: { title: [{
|
|
8535
|
+
type: Input
|
|
8536
|
+
}], subtitle: [{
|
|
8537
|
+
type: Input
|
|
8538
|
+
}], cardConfig: [{
|
|
8539
|
+
type: Input
|
|
8540
|
+
}], stateChange: [{
|
|
8541
|
+
type: Output
|
|
8542
|
+
}], collapsed: [{
|
|
8543
|
+
type: Output
|
|
8544
|
+
}], minimized: [{
|
|
8545
|
+
type: Output
|
|
8546
|
+
}], maximized: [{
|
|
8547
|
+
type: Output
|
|
8548
|
+
}], removed: [{
|
|
8549
|
+
type: Output
|
|
8550
|
+
}], headerClick: [{
|
|
8551
|
+
type: Output
|
|
8552
|
+
}] } });
|
|
8553
|
+
|
|
8196
8554
|
/**
|
|
8197
8555
|
* Notification API Service
|
|
8198
8556
|
* HTTP client for notification API endpoints
|
|
@@ -14846,5 +15204,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
14846
15204
|
* Generated bundle index. Do not edit.
|
|
14847
15205
|
*/
|
|
14848
15206
|
|
|
14849
|
-
export { CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleThemeToggleComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, CurrencyPipe, CurrencyService, DEFAULT_CURRENCY_CONFIG, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl, notificationRoutesUrl };
|
|
15207
|
+
export { CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleCardComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleThemeToggleComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, CurrencyPipe, CurrencyService, DEFAULT_CURRENCY_CONFIG, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl, notificationRoutesUrl };
|
|
14850
15208
|
//# sourceMappingURL=cloud-ide-element.mjs.map
|