cloud-ide-layout 0.0.1 → 1.0.0

package/src/lib/assets/css/cide-lyt-style.scss

@@ -0,0 +1,182 @@
+// Apply Variables
+@import './cide-lyt-variable.scss';
+/*----------------------------------------
+*           LAYOUT CSS STARTS HERE
+*        HERE WE WILL STORE THE CLASSES
+*------------------------------------------*/
+
+* {
+    scrollbar-width: thin;
+}
+
+// Body Starts Here
+body {
+    overflow-y: hidden;
+}
+
+// Body Ends Here
+
+// Header Starts Here
+.cide-lyt-header {
+    height: var(--cide-lyt-header-wrapper-height);
+    background-color: var(--cide-lyt-header-wrapper-background-color);
+    box-shadow: var(--cide-lyt-header-wrapper-box-shadow);
+    z-index: var(--cide-lyt-header-wrapper-z-index);
+    border-bottom: 1px solid var(--cide-lyt-header-wrapper-border-color);
+}
+
+.cide-lyt-header-wrapper-hide {
+    display: none !important;
+}
+
+
+// Header Ends Here
+
+// Request Starts Here
+.cide-lyt-request {
+    height: var(--cide-lyt-request-wrapper-height);
+}
+
+.cide-lyt-request-wrapper-hide {
+    display: none !important;
+}
+
+// Request Ends Here
+
+// Sidebar Stack Starts Here
+.cide-lyt-stack {
+    background-color: var(--cide-lyt-stack-wrapper-background-color);
+    width: var(--cide-lyt-stack-wrapper-width);
+    min-width: var(--cide-lyt-stack-wrapper-width);
+}
+
+// Sidebar Stack Ends Here
+
+// Sidebar Starts Here
+.cide-lyt-sidebar-page-wrapper {
+    display: flex;
+    flex-direction: row;
+    height: calc(100vh - var(--cide-lyt-header-wrapper-height) - var(--cide-lyt-footer-wrapper-height));
+}
+
+.cide-lyt-sidebar-page-hide {
+    display: none !important;
+}
+
+.cide-lyt-sidebar {
+    background-color: var(--cide-lyt-sidebar-wrapper-background-color);
+}
+
+#cide-lyt-sidebar-page,
+#cide-lyt-page-wrapper {
+    height: calc(100vh - var(--cide-lyt-header-wrapper-height) - var(--cide-lyt-footer-wrapper-height));
+}
+
+.cide-lyt-outlet-sidedrawer-wrapper {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
+
+.tab-content-container~* {
+    height: 100%;
+}
+
+.cide-lyt-footer-exist {
+    .cide-lyt-outlet-sidedrawer-wrapper {
+        // height: calc(100% - var(--cide-lyt-footer-wrapper-height));
+        height: 100%;
+    }
+}
+
+.cide-lyt-request-exist {
+    .cide-lyt-outlet-sidedrawer-wrapper {
+        height: calc(100% - var(--cide-lyt-request-wrapper-height));
+    }
+}
+
+.cide-lyt-sidebar-menu {
+    width: var(--cide-lyt-sidebar-menu-width);
+    min-width: var(--cide-lyt-sidebar-menu-width) !important;
+    border-right: 1px solid var(--cide-lyt-sidebar-menu-border-color);
+}
+
+// Sidebar Ends Here
+
+// Sidedrawer Starts Here
+.cide-lyt-sidedrawer-wrapper {
+    width: var(--cide-lyt-sidedrawer-wrapper-width);
+    min-width: var(--cide-lyt-sidedrawer-wrapper-width);
+    background-color: var(--cide-lyt-sidedrawer-wrapper-background-color);
+}
+
+.cide-lyt-sidedrawer-wrapper-hide {
+    display: none !important;
+}
+
+// Sidedrawer Ends Here
+
+// Footer Stars Here
+.cide-lyt-footer-console-wrapper {
+    height: var(--cide-lyt-footer-wrapper-height);
+    min-height: var(--cide-lyt-footer-wrapper-height);
+}
+
+// Utility classes for height management
+.cide-full-height {
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.cide-flex-fill {
+    flex: 1 !important;
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.cide-no-full-height {
+    height: auto !important;
+    display: block !important;
+}
+
+// Scrollable content wrapper
+.cide-scrollable-content {
+    overflow-y: auto;
+    height: 100%;
+    flex: 1;
+}
+
+// Component wrapper that ensures full height
+.cide-component-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    >* {
+        flex: 1;
+        height: 100%;
+    }
+}
+
+.cide-footer {
+    background-color: var(--code-lyt-footer-wrapper-background-color);
+    border-top: 1px solid var(--code-lyt-footer-wrapper-border-color);
+
+}
+
+.cide-lyt-footer-console-wrapper-hide {
+    display: none !important;
+}
+
+// Footer Ends Here
+
+// Sidedrawer Wrapper Child Starts Here
+.cide-lyt-sidedrawer-wrapper-child {
+    height: 100%;
+    overflow: hidden;
+}
+
+// Sidedrawer Wrapper Child Ends Here

package/src/lib/assets/css/cide-lyt-variable.scss

@@ -0,0 +1,119 @@
+/*-------------------------------------------------
+* CIDE-LYT Variable
+*--------------------------------------------------*/
+:root {
+    // Header Starts Here
+    --cide-lyt-header-wrapper-height: 42px;
+    --cide-lyt-header-wrapper-background-color: white;
+    --cide-lyt-header-wrapper-border-color: rgba(229, 231, 235, 1);
+    --cide-lyt-header-wrapper-box-shadow:  0 4px 12px rgba(0, 0, 0, 0.05);
+    --cide-lyt-header-wrapper-z-index: 1000;
+    // Header Ends Here
+
+    --cide-lyt-request-wrapper-height: 20px;
+    --cide-lyt-sidebar-wrapper-hieght: 50px;
+    --cide-lyt-sidedrawer-wrapper-hieght:50px;
+    --cide-lyt-footer-wrapper-hieght:50px;
+    --cide-lyt-console-wrapper-hieght:50px;
+
+    // Sidebar Stack Starts Here
+    --cide-lyt-stack-wrapper-background-color: #f9f9f9;
+    --cide-lyt-stack-wrapper-width: 60px;
+    // Sidebar Stack Ends Here
+
+    // Sidebar Starts Here
+    --cide-lyt-sidebar-wrapper-background-color: #F9F9F9;
+    --cide-lyt-sidebar-menu-width: 176px;
+    --cide-lyt-sidebar-menu-border-color: #e6e6e6;
+    --cide-lyt-sidebar-nav-item-color-active: var(--cide-theme-color-brand-primary);
+    --cide-lyt-sidebar-nav-item-color: var(--cide-theme-label-color);
+    // Sidebar Ends Here
+
+    // Side Drawer Starts Here
+    --cide-lyt-sidedrawer-wrapper-background-color: var(--cide-lyt-sidebar-wrapper-background-color);
+    --cide-lyt-sidedrawer-wrapper-width: 32px;
+    --cide-lyt-sidedrawer-wrapper-width-expanded-min: 384px;
+    // Side Drawer Ends Here
+
+    // Page Wrapper Starts Here
+    --cide-lyt-page-wrapper-background-color: rgb(243 244 246);
+    // Page Wrapper Ends Here
+
+    // Footer Starts Here
+    --cide-lyt-footer-wrapper-height: 20px;
+    --code-lyt-footer-wrapper-background-color: #F9F9F9;
+    --code-lyt-footer-wrapper-border-color: #e6e6e6;
+    // Footer Ends Here
+}
+
+
+/* :root defines variables available globally */
+:root {
+  /* 1. TYPOGRAPHIC SCALE */
+  --cide-theme-font-size-xs: 0.72rem; /* 16px */
+  --cide-theme-font-size-sm: 0.8rem; /* 12.8px */
+  --cide-theme-font-size-lg: 1.25rem; /* 20px */
+  --cide-theme-font-size-xl: 1.563rem; /* 25px */
+  --cide-theme-font-size-xxl: 1.953rem; /* 31.25px */
+  --cide-theme-font-size-xxxl: 2.441rem; /* 39.06px */
+
+  /* 2. FONT WEIGHTS */
+  --cide-theme-font-weight-regular: 400;
+  --cide-theme-font-weight-semibold: 600;
+  --cide-theme-font-weight-bold: 700;
+
+  /* 3. LINE HEIGHTS */
+  --cide-theme-line-height-body: 1.6;
+  --cide-theme-line-height-heading: 1.2;
+}
+
+/* Base styles for the body */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: var(--cide-theme-font-size-base);
+  line-height: var(--cide-theme-line-height-body);
+  color: #333; /* Use a dark gray, not pure black */
+}
+
+/* Rules for Headings */
+h1, h2, h3, h4, h5 {
+  // margin: 2rem 0 1rem 0;
+  font-family: inherit;
+  line-height: var(--cide-theme-line-height-heading);
+}
+
+h1 {
+  font-size: var(--cide-theme-font-size-xxxxl);
+  font-weight: var(--cide-theme-font-weight-bold);
+}
+
+h2 {
+  font-size: var(--cide-theme-font-size-xxxl);
+  font-weight: var(--cide-theme-font-weight-bold);
+}
+
+h3 {
+  font-size: var(--cide-theme-font-size-xxl);
+  font-weight: var(--cide-theme-font-weight-bold);
+}
+
+h4 {
+  font-size: var(--cide-theme-font-size-xl);
+  font-weight: var(--cide-theme-font-weight-semibold);
+}
+
+h5 {
+  font-size: var(--cide-theme-font-size-lg);
+  font-weight: var(--cide-theme-font-weight-semibold);
+}
+
+/* Rules for Paragraphs and Lists */
+p, ul, ol {
+  // margin-bottom: 1rem;
+  max-width: 65ch; /* Improves readability */
+}
+
+/* Use a class for small text to be explicit */
+.text-small {
+  font-size: var(--cide-theme-font-size-sm);
+}

package/fesm2022/cloud-ide-layout-home-wrapper.component-BV7ptL0Y.mjs

@@ -1,14 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component } from '@angular/core';
-
-class CideLytHomeWrapperComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytHomeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CideLytHomeWrapperComponent, isStandalone: true, selector: "cide-lyt-home-wrapper", ngImport: i0, template: "We will design the common components and set the controls via the service, \r\nFor pages which is not possible to touch by the developer will be set by service, example after login index developer can\u2019t touch the component for custom (project-specific code so we will use a service with a menu and setting for that menu, (array of menu and its option to be passed, so that component will set itself as menu match)\r\n<br>\r\nThe widgets page will be managed by the drag-and-drop functionality and the card will decided by the database and which design which API call will be done by the note API response will be as per the design selected.\t(Developers don't have the right to code for that everything will be done by the database only)", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytHomeWrapperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cide-lyt-home-wrapper', standalone: true, imports: [], template: "We will design the common components and set the controls via the service, \r\nFor pages which is not possible to touch by the developer will be set by service, example after login index developer can\u2019t touch the component for custom (project-specific code so we will use a service with a menu and setting for that menu, (array of menu and its option to be passed, so that component will set itself as menu match)\r\n<br>\r\nThe widgets page will be managed by the drag-and-drop functionality and the card will decided by the database and which design which API call will be done by the note API response will be as per the design selected.\t(Developers don't have the right to code for that everything will be done by the database only)" }]
-        }] });
-
-export { CideLytHomeWrapperComponent };
-//# sourceMappingURL=cloud-ide-layout-home-wrapper.component-BV7ptL0Y.mjs.map

package/fesm2022/cloud-ide-layout-home-wrapper.component-BV7ptL0Y.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"cloud-ide-layout-home-wrapper.component-BV7ptL0Y.mjs","sources":["../../../projects/cloud-ide-layout/src/lib/layout/home/home-wrapper/home-wrapper.component.ts","../../../projects/cloud-ide-layout/src/lib/layout/home/home-wrapper/home-wrapper.component.html"],"sourcesContent":["import { Component } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'cide-lyt-home-wrapper',\r\n  standalone: true,\r\n  imports: [],\r\n  templateUrl: './home-wrapper.component.html',\r\n  styleUrl: './home-wrapper.component.css'\r\n})\r\nexport class CideLytHomeWrapperComponent {\r\n\r\n}\r\n","We will design the common components and set the controls via the service, \r\nFor pages which is not possible to touch by the developer will be set by service, example after login index developer can’t touch the component for custom (project-specific code so we will use a service with a menu and setting for that menu, (array of menu and its option to be passed, so that component will set itself as menu match)\r\n<br>\r\nThe widgets page will be managed by the drag-and-drop functionality and the card will decided by the database and which design which API call will be done by the note API response will be as per the design selected.\t(Developers don't have the right to code for that everything will be done by the database only)"],"names":[],"mappings":";;;MASa,2BAA2B,CAAA;8GAA3B,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,iFCTxC,wuBAGuT,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FDM1S,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAPvC,SAAS;+BACE,uBAAuB,EAAA,UAAA,EACrB,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,QAAA,EAAA,wuBAAA,EAAA,CAAA;;;;;"}