diff --git a/controllets/search-panel-controllet/search-panel-controllet.html b/controllets/search-panel-controllet/search-panel-controllet.html
new file mode 100644
index 0000000..d516133
--- /dev/null
+++ b/controllets/search-panel-controllet/search-panel-controllet.html
@@ -0,0 +1,153 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-styles/color.html">
+<link rel="import" href="../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
+<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
+
+<!--
+`text-element-controllet` is a text area with heading. It fires an event when the text value is modified. This event can be useful when you have to monitor many af this elements.
+
+
+Example:
+
+    <text-element-controllet heading="myField"
+                             description="myFieldDescription"
+                             number="1">
+    </text-element-controllet>
+
+
+@element text-element-controllet
+@status beta
+@homepage
+@group controllets
+-->
+
+
+<dom-module id="search-panel-controllet">
+    <template>
+
+        <style is="custom-style">
+
+            paper-input.search-text{
+                --paper-input-container-input-color: #ffffff;
+                --paper-input-container-focus-color: #ffffff;
+                --paper-input-container-color: #ffffff;
+                position : absolute;
+                right: 5px;
+                top: -20px;
+
+            }
+
+            neon-animated-pages{
+               width: 30vw;
+            }
+
+        </style>
+        <div class="horizontal layout">
+            <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
+                <neon-animatable></neon-animatable>
+                <neon-animatable><paper-input class="search-text" label="search" autosave="search_text" results="5" transition="fade-in-animation"></paper-input></neon-animatable>
+            </neon-animated-pages>
+            <paper-icon-button icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-icon-button>
+        </div>
+
+    </template>
+
+    <script>
+
+        Polymer({
+
+            is: 'search-panel-controllet',
+
+            /**
+             * Fired when the user change the text value
+             *
+             * @event search-panel-controllet_content-changed
+             */
+
+            properties: {
+                timer :{
+                    type: Number,
+                    value : 0
+                },
+                selected : {
+                    type: Number,
+                    value : 0
+                },
+                entryAnimation : {
+                    type: String,
+                    value: ""
+                },
+                exitAnimation : {
+                    type: String,
+                    value: ""
+                }
+            },
+            _toggleClick: function(e){
+                if(this.selected == 0) {
+                    this.entryAnimation = 'fade-in-animation';//'slide-from-right-animation';
+                    this.exitAnimation = 'fade-out-animation';//'slide-left-animation';
+                    this.selected = 1;
+                }else{
+                    this.entryAnimation = 'fade-in-animation';//'slide-from-left-animation';
+                    this.exitAnimation = 'fade-out-animation';//'slide-right-animation';
+                    this.selected = 0;
+                }
+            },
+            /**
+             * Callback related to text change
+             *
+             * @method _valueChanged
+             *
+             * @param {Event} e
+             */
+            _valueChanged : function(oldvalue, newValue){
+                clearTimeout (this.timer);
+                this.timer = setTimeout(this.fire('text-element-controllet_content-changed', {newValue: newValue}), 2000);
+            },
+            /**
+             * It returns the value in text area
+             *
+             * @method getValue
+             */
+            getValue : function(){
+                return this.$.text.value;
+            }
+        });
+
+    </script>
+
+</dom-module>
\ No newline at end of file