DROP-IV

.gitignore

@@ -141,6 +141,7 @@ dist
 /node_modules
 
 /test-app
+/declarative-sample-app/dist
 
 #CLI 
 ng-declarative-cli/node_modules

declarative-sample-app/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "declarative-sample-app",
+  "version": "1.0.0",
+  "scripts":{
+    "build" : "ng-declarative build",
+    "start" : "cd dist/declarative-sample-app && yarn start"
+  },
+  "description": "Declarative Sample App",
+  "main": "index.js",
+  "author": "Soumya Prasad Rana",
+  "license": "MIT"
+}

declarative-sample-app/src/AppController.ts

@@ -0,0 +1,10 @@
+export class AppController {
+
+    appName = "SAMPLE APP";
+    pageHeading = "Hello, "
+    pageSubHeading = "I am a sample app built using ng-declarative framework!";
+    pageParagraph = `Embrace simplicity with NG Declarative Framework – a powerful tool for Angular app development. Say goodbye to complex setups; design your UI with ease using XML components. Remember, why do programmers prefer dark mode? Because light attracts bugs! Happy coding!`
+    constructor(private app: any) {
+
+    }
+}

declarative-sample-app/src/source.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<ng-declarative-app controller="AppController" name="declarative-sample-app" id="FeNV5u8">
+  <navbar sticky="true" color-scheme="dark" brand-text-css-class="text-warning" brand-icon="bi bi-airplane-engines text-warning" brand-text="%%appCtrl.appName%%" id="bUYgwdF">
+    <navbar-center id="iynGj1C">
+      <form css-class="search-form" transition="tada" transition-duration="long" action="appCtrl.doSearch" direction="row" width="full" id="VhZuQA1">
+        <input transition="slide-in" transition-duration="long" prepend-icon-class="bi bi-search" required="true" theme="text" attribute-name="search" model="appCtrl.username" placeholder="Search..." id="YAO0fEm"/>
+        <form-action css-class="text-muted" transition="slide-in" theme="warning" transition-duration="long" label="Search" id="PML0lSd"/>
+      </form>
+    </navbar-center>
+    <navbar-end id="vdweRWwhi">
+      <navitem route="/home" label="Home" id="fiwde6fyb"/>
+    </navbar-end>
+  </navbar>
+  <route uri="/home" title="Declarative Sample App" id="home">
+    <block width="full" height="full" justify-contents="center" align-items="center" direction="column" id="wizYbyA">
+      <block  direction="row" id="ySy4I1u">
+        <block justify-contents="center" align-items="center" direction="column" id="xagOI">
+            <image transition="tada" transition-duration="long" css-class="text-warning main-icon" type="icon" icon="bi bi-airplane-engines" id="ijMfMaD"/>
+            <label  css-class="badge bg-warning text-dark" theme="display-large,bold" text="hover the icon!" id="DPw4cdN9Y"/>  
+        </block>
+        <block width="min-content" direction="column" id="xalZgOI">
+          <label  transition="typing" transition-duration="short" theme="display-large,bold" text="%%appCtrl.pageHeading%%" id="DPw4N9Y"/>
+          <label  transition="typing" transition-duration="long" theme="heading-small,bold" text="%%appCtrl.pageSubHeading%%" id="DcdsPw4N9Y"/>
+          <paragraph transition="typing" transition-duration="  " text="%%appCtrl.pageParagraph%%" id="k6MoblQ"/>
+        </block>
+      </block>
+    </block>
+  </route>
+</ng-declarative-app>

declarative-sample-app/src/styles.scss

@@ -0,0 +1,43 @@
+.search-form{
+    .form-group{
+        margin-right: 0px !important;
+    }
+    .input-group-text{
+        border-color: var(--bs-warning);
+        border-radius: 0;
+    }
+    .form-control{
+
+        border: 1px solid var(--bs-warning);
+        border-right: 10px solid var(--bs-warning);
+    }
+
+}
+.app-nav{
+    background-color: #000;
+}
+.main-icon{
+    font-size: 200px;
+    transform: rotate(45deg);
+    display: inline-block;
+}
+
+ .main-icon:hover {
+            animation: shakeAndFly 2s ease-in-out forwards;
+        }
+
+        @keyframes shakeAndFly {
+            0%, 100% {
+                transform: translateX(0) rotate(0);
+            }
+            10%, 30%, 50%, 70% {
+                transform: translateX(-5px) rotate(-5deg);
+            }
+            20%, 40%, 60% {
+                transform: translateX(5px) rotate(5deg);
+            }
+            100% {
+                transform: translateY(-100vh);
+            }
+        }
+