diff --git a/controllets/document-card-controllet/spreadsheet-card-controllet.html b/controllets/document-card-controllet/spreadsheet-card-controllet.html
new file mode 100644
index 0000000..78fec9a
--- /dev/null
+++ b/controllets/document-card-controllet/spreadsheet-card-controllet.html
@@ -0,0 +1,222 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html"/>
+<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
+<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
+
+<script src="../../locales/paper_card_controllet_ln.js"></script>
+
+<dom-module id="spreadsheet-card-controllet">
+
+    <template>
+        <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
+        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+        <style>
+
+            #paper_card_container {
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 16px;
+                background-color: white;
+            }
+
+            #content {
+                position:relative;
+                padding: 2px;
+                /*padding: 4px 4px 0px 4px;
+                width: 98%;
+                height: 90%;*/
+            }
+
+            .footer {
+                height: 16px;
+            }
+
+            .comment {
+                position: relative;
+                top: -50px;
+                height: 50px;
+                background-color: white;
+                padding: 8px;
+                font-size: small;
+                color: #727272;
+                word-wrap: break-word;
+                overflow: hidden;
+            }
+
+            paper-fab#fullscreen-button {
+                position: absolute;
+                /*z-index: 10;*/
+                top: 11px;
+                right: 15px;
+                --paper-fab-background:#FFFFFF;
+                padding : 0px;
+                margin: 0px;
+                height: 24px;
+                width: 24px;
+                color: #666666;
+            }
+
+            paper-dialog {
+                margin: 0px;
+                padding: 0px;
+                z-index: 1100;
+            }
+
+            #fullscreen_container {
+                display: inline;
+                position: fixed;
+                width: 90%;
+                height: 80vh;
+                right: 0;
+                left: 0;
+                top: 64px;
+                margin-right: auto;
+                margin-left: auto;
+                padding: 8px;
+                background-color: white;
+            }
+
+            #fullscreen_content {
+                margin: 0px;
+            }
+
+            #resource{
+                height: 100%;
+                width: 100%;
+            }
+
+            :host #docs-header{
+                display : none;
+            }
+
+            #info_close_button{
+                z-index: 1;
+                color: #666666;
+                box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+                -webkit-transition: 0.2s ease-out;
+                -moz-transition: 0.2s ease-out;
+                -o-transition: 0.2s ease-out;
+                transition: 0.2s ease-out;
+                cursor: pointer;
+                background: linear-gradient(#f4f4f4,#e4e4e4);
+                float: right;
+                top: 11px;
+                right: 8px;
+                margin: 0px;
+                position: absolute;
+                height: 29px;
+                min-width: 30px;
+                padding: 5px;
+            }
+
+        </style>
+
+
+        <paper-material id="paper_card_container" elevation="{{elevation}}">
+
+            <div id="content">
+                <iframe id="resource" src="{{resourceUrl}}"></iframe>
+                <!--<iframe id="resource" src="{{resourceUrl}}"></iframe>-->
+            </div>
+
+            <template id="dom-if" if="{{showControls}}">
+                <paper-fab id="fullscreen-button" class="open" mini icon="fullscreen" on-click="_handleOpenClick"></paper-fab>
+
+                <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
+                    <!--with-backdrop-->
+                    <div id="fullscreen_content"></div>
+                    <paper-button id="info_close_button" dialog-confirm autofocus>x</paper-button>
+                </paper-dialog>
+            </template>
+
+        </paper-material>
+
+    </template>
+
+    <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
+
+    <script>
+
+        Polymer({
+            is: "spreadsheet-card-controllet",
+            properties: {
+
+                width: {
+                    type: Number,
+                    observer: "_changeWidth"
+                },
+
+                height: {
+                    type: Number,
+                    observer: "_changeHeight"
+                },
+
+                elevation:{
+                    type: Number,
+                    value: 3
+                },
+
+                createNewType : {
+                    type : String,
+                    value : undefined
+                },
+
+                comment:{
+                    cardType: String,
+                    value: ""
+                },
+
+                resourceUrl : {
+                    type : String,
+                    value : undefined
+                },
+
+                userName: {
+                    type: String,
+                    value: undefined
+                },
+
+                showControls: {
+                    type: Boolean,
+                    value: false
+                },
+
+                lang:{
+                    type: String,
+                    value: navigator.language
+                }
+            },
+
+            ready : function(){
+            },
+
+            attached: function(){
+                $(this.$.fullscreen_container).perfectScrollbar();
+            },
+
+            _changeWidth: function(){
+                //this.style.width = this.width + "px";
+                //this.$.paper_card_container.style.width = this.width + "px";
+                //this.$.content.style.width = this.width - 8 + "px";
+            },
+
+            _changeHeight: function(){
+                this.style.height = this.height +  "vh";
+                //this.$.content.width = this.width  - 4 + "vh";
+                this.$.paper_card_container.style.height = this.height + "vh";
+                this.$.content.style.height = this.height - 1 + "vh";
+                $(this.$.content).perfectScrollbar();
+            },
+
+            _handleOpenClick: function(){
+                this.$.fullscreen_content.style.height = "80vh";
+                this.$.fullscreen_content.innerHTML = this.$.content.innerHTML;
+                this.$.fullscreen_container.style.display = "inline";//datalet res
+                this.$.fullscreen_container.open();
+            }
+
+        })
+    </script>
+
+</dom-module>
\ No newline at end of file
diff --git a/controllets/text-element-controllet/metadata-element-controllet.html b/controllets/text-element-controllet/metadata-element-controllet.html
new file mode 100644
index 0000000..bbe325b
--- /dev/null
+++ b/controllets/text-element-controllet/metadata-element-controllet.html
@@ -0,0 +1,175 @@
+<!--
+@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">
+
+<!--
+`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="metadata-element-controllet">
+    <template>
+
+        <style is="custom-style">
+
+            .avatar {
+                display: inline-block;
+                position: relative;
+                float: left;
+                height: 1.7em;
+                width: 1.7em;
+                border-radius: 50%;
+                background: var(--paper-blue-500);
+                color: white;
+                line-height: 2em;
+                font-size: 0.74em;
+                text-align: center;
+            }
+
+            .heading{
+                /*width: 12.5em;*/
+            }
+
+            .big {
+                display: inline-block;
+                position: relative;
+                float: left;
+                font-size: 1em;
+                padding: 0.5em 0.25em 0.5em;
+                color: var(--google-grey-500);
+            }
+
+            .medium {
+                position: relative;
+                float: left;
+                font-size: 0.8125em;
+                padding-bottom: 0px;
+                display: inline-block;
+                padding-left: 10px;
+                width: 100%;
+            }
+
+            #text{
+                margin: 20px;
+            }
+
+        </style>
+
+        <div class="layout vertical">
+            <div class="heading layout horizontal">
+                <div class="avatar">{{number}}</div>
+                <div class="medium">{{description}}</div>
+            </div>
+           <paper-textarea id="text" label="{{heading}}" value="{{value}}" always-float-label></paper-textarea>
+        </div>
+
+    </template>
+
+    <script>
+
+        Polymer({
+
+            is: 'metadata-element-controllet',
+
+            properties: {
+                /**
+                 * It's the name of the elelent
+                 *
+                 * @attribute heading
+                 * @type Strig
+                 * @default 'Heading'
+                 */
+                heading : {
+                    type : String,
+                    value : "Heading"
+                },
+                /**
+                 * It's the description of the elelent
+                 *
+                 * @attribute description
+                 * @type Strig
+                 * @default 'Description'
+                 */
+                description: {
+                    type: String,
+                    value: "Description"
+                },
+                /**
+                 * It's a string value the represent the current number of elelent. It will be use in the label section.
+                 *
+                 * @attribute number
+                 * @type Strig
+                 * @default '0'
+                 */
+                number: {
+                    type: String,
+                    value : "0"
+                },
+
+                value :{
+                    type: String,
+                    value: ""
+                },
+
+                timer :{
+                    type: Number,
+                    value : 0
+                }
+            },
+            /**
+             * It returns the value in text area
+             *
+             * @method getValue
+             */
+            getValue : function(){
+                return this.$.text.value;
+            }
+        });
+
+    </script>
+
+</dom-module>
\ No newline at end of file