import{j as i,M as l}from"./index-BUq9tdzQ.js";import{useMDXComponents as a}from"./index-Dz0ankoe.js";import{T as e}from"./custom-title-docs-DFRUhaJu.js";import"./iframe-BulbfOMZ.js";import"./index-C__6K5js.js";import"./index-DrFu-skq.js";function s(n){const t={code:"code",pre:"pre",...a(),...n.components};return i.jsxs(i.Fragment,{children:[i.jsx(l,{title:"Foundation/Griglia/Schema pagina"}),`
`,i.jsx(e,{title:"Struttura pagina",links:[]}),`
`,i.jsx(t.pre,{children:i.jsx(t.code,{className:"language-html",children:`<!doctype html>
<html lang="it">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Applicazione Intranet</title>

    <!-- IMPORT CSS E JS -->
    <link rel="stylesheet" href="https://cdn.inailcloud.it/assets/inail/u.1.0/static/css/bootstrap.css"
        media="screen" />
    <link rel="stylesheet" href="https://cdn.inailcloud.it/assets/inail/u.1.0/static/css/foglia.css" media="screen" />
    <link rel="stylesheet" href="https://cdn.inailcloud.it/assets/inail/u.1.0/static/css/custom.css" media="screen" />
    <link rel="stylesheet" href="https://cdn.inailcloud.it/assets/inail/u.1.0/static/css/form.css" media="screen">
    <link rel="stylesheet"
        href="https://cdn.inailcloud.it/assets/inail/u.1.0/static/fontawesome-free-6.4.0-web/css/all.min.css" />
    <link rel="stylesheet"
        href="https://cdn.inailcloud.it/assets/inail/u.1.0/static/js/datepicker/bootstrap-datepicker3.standalone.css" />
    <link rel="stylesheet" href="https://cdn.inailcloud.it/assets/inail/u.1.0/static/css/home_sezione.css"
        media="screen" />
    <link rel="stylesheet" href="https://cdn.inailcloud.it/assets/inail/u.1.0/static/css/servizi.css" media="screen" />

    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static/js/modernizr.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static/js/jquery.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static/js/jquery-ui.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static/js/datepicker-it.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static/js/bootstrap.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static/js/main.js"><\/script>

    <link rel="stylesheet" type="text/css" href="https://cdn.inailcloud.it/assets/inail/u.1.0/static/css/jquery-ui.css">

    <link rel="stylesheet" type="text/css"
        href="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/css/custom-webkit.css">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/css/link-webkit.css">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/css/_inail-global.css">
    <link rel="stylesheet"
        href="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/css/dataTables.bootstrap.min.css">
    <script type="text/javascript"
        src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-webkit.js"><\/script>

    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/jquery.dataTables.min.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/dataTables.bootstrap.min.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/dataTablesEdit.js"><\/script>

    <link href="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/css/slick/slick.css" rel="stylesheet">
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/slick/slick.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/jqueryui.datePickerAria.js"><\/script>

    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-webkit-material.js"><\/script>
    <link rel="stylesheet" href="https://cdn.inailcloud.it/assets/inail/u.1.0//static-webkit/css/multiselect.css"
        media="screen" />
    <link href="https://cdn.inailcloud.it/assets/inail/u.1.0//static-webkit/css/tags.css" rel="stylesheet"
        type="text/css">
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-input-textarea.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-input-combobox.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-action-dropdown.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-form-submit.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-form-validation.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-feedback.js"><\/script>
    <script src="https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-hr-menu.js"><\/script>

    <script type="text/javascript" src="https://cdn.inailcloud.it/assets/app/header_footer/js/headerfooter.js"
        id="headerfooterjs"><\/script>

    <script>
        window.HeaderFooterJS.configHeaderFooter({
            client_id: "ClientHF_v4",
            nomeApp: "Applicazione Intranet",
            isHeadSimple: true,
            modalitaSPA: true,
            tipo_ambiente: 'intranet',
        });
        window.HeaderFooterJS.initHeaderFooter();
    <\/script>
</head>

<body>
    <div class="container container-webkit">
        <div class="row">
            <!-- MENU INTRANET -->
            <!-- <app-menu> -->
            <nav aria-label="Menù dell'applicativo" id="menu-applicativo">
                <div class="row">
                    <div class="col-xs-12 p-0 inail-intranet-menu-container">
                        <button id="inail-intranet-toggle-btn" class="inail-intranet-menu-toggle-btn me-2"
                            aria-expanded="false" aria-label="Apri il menu dell'applicativo">
                            <span class="inail-intranet-icon fa fa-bars active" aria-hidden="true"></span>
                            <span class="inail-intranet-icon fa fa-times" aria-hidden="true"></span>
                        </button>
                    </div>
                </div>

                <div class="row">
                    <div id="inail-intranet-aside-menu" class="p-0 col-md-3 col-lg-3 col-sm-5 col-xs-9 hidden"
                        aria-hidden="true">
                        <div id="navigazionesecondaria" class="col-xs-12 col-sm-12 col-lg-12 col-md-12 filtro">
                            <div class="box-menu-contestuale servizi-online-primo-livello">
                                <div role="group" id="sidebar-superiore" aria-label="Voci del menu">
                                    <ul role="list" class="inail-menu-divider">
                                        <li class="selected">
                                            <button class="inail-menu-container" data-toggle="collapse"
                                                data-target="#first-menu-item-0" aria-expanded="true" "="">
            <span class=" inail-menu-level-1">Primo livello</span>
                                                <span class="btn btn-link sub-tree-toggle"></span>
                                            </button>
                                            <ul class="livello_2 inail-menu-level-2 collapse in" id="first-menu-item-0"
                                                role="list">

                                                <li>
                                                    <div class="inail-menu-container">
                                                        <a href="javascript:void(0)">Secondo livello</a>
                                                    </div>
                                                </li>
                                                <li class="selected">
                                                    <div class="inail-menu-container">
                                                        <a href="javascript:void(0)">Secondo livello</a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="inail-menu-container">
                                                        <a href="javascript:void(0)">Secondo livello</a>
                                                    </div>
                                                </li>

                                            </ul>
                                        </li>
                                        <li>
                                            <div class="inail-menu-container">
                                                <a class="livello_1 inail-menu-level-1" href="javascript:void(0)">Primo
                                                    livello</a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="inail-menu-container">
                                                <a class="livello_1 inail-menu-level-1" href="javascript:void(0)">Primo
                                                    livello</a>
                                            </div>
                                        </li>
                                        <li>
                                            <button class="inail-menu-container" data-toggle="collapse"
                                                data-target="#first-menu-item-3" aria-expanded="false" "="">
            <span class=" inail-menu-level-1">Primo livello</span>
                                                <span class="btn btn-link sub-tree-toggle"></span>
                                            </button>
                                            <ul class="livello_2 inail-menu-level-2 collapse " id="first-menu-item-3"
                                                role="list">

                                                <li>
                                                    <div class="inail-menu-container">
                                                        <a href="javascript:void(0)">Secondo livello</a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="inail-menu-container">
                                                        <a href="javascript:void(0)">Secondo livello</a>
                                                    </div>
                                                </li>

                                            </ul>
                                        </li>
                                        <li>
                                            <button class="inail-menu-container" data-toggle="collapse"
                                                data-target="#first-menu-item-4" aria-expanded="false" "="">
            <span class=" inail-menu-level-1">Primo livello</span>
                                                <span class="btn btn-link sub-tree-toggle"></span>
                                            </button>
                                            <ul class="livello_2 inail-menu-level-2 collapse " id="first-menu-item-4"
                                                role="list">

                                                <li>
                                                    <div class="inail-menu-container">
                                                        <a href="javascript:void(0)">Secondo livello</a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="inail-menu-container">
                                                        <a href="javascript:void(0)">Secondo livello</a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="inail-menu-container">
                                                        <a href="javascript:void(0)">Secondo livello</a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="inail-menu-container">
                                                        <a href="javascript:void(0)">Secondo livello</a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="inail-menu-container">
                                                        <a href="javascript:void(0)">Secondo livello</a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="inail-menu-container">
                                                        <a href="javascript:void(0)">Secondo livello</a>
                                                    </div>
                                                </li>

                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                                <div role="group" aria-label="Utilizzo dell'applicativo" class="inail-sezione-media">
                                    <ul class="fa-ul miniMenuIcon pl-0" role="list">
                                        <li><span aria-hidden="true" tabindex="-1"
                                                class="fa fa-solid fa-circle-question"></span><a
                                                href="javascript:void(0)" class="inail-text-link-1 m-0">Consulta le
                                                FAQ</a></li>
                                        <li><span aria-hidden="true" tabindex="-1" class="fa fa-solid fa-book"></span><a
                                                href="javascript:void(0)" class="inail-text-link-1 m-0">Manuali
                                                operativi</a></li>
                                        <li><span aria-hidden="true" tabindex="-1"
                                                class="fa fa-solid fa-download"></span><a href="javascript:void(0)"
                                                class="inail-text-link-1 m-0">Scarica elemento</a></li>
                                    </ul>
                                </div>
                                <div role="group" id="sidebar-inferiore" aria-labelledby="sezione-inferiore">
                                    <div id="sezione-inferiore" class="pb-4 inail-mat-sezione-inferiore-title">Titolo
                                        inferiore</div>
                                    <ul role="list">
                                        <li class="p-0"><span class="sidebarLinks"><a href="javascript:void(0)">Lorem
                                                    ipsum dolor sit amet</a></span></li>
                                        <li class="p-0"><span class="sidebarLinks"><a href="javascript:void(0)">Lorem
                                                    ipsum dolor sit amet</a></span></li>
                                        <li class="p-0"><span class="sidebarLinks"><a href="javascript:void(0)">Lorem
                                                    ipsum dolor sit amet</a></span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- BREADCRUMBS -->
                    <div id="inail-intranet-main-menu" class="p-0 col-md-12 col-lg-12">
                        <div class="row breadcrumbs internet-breadcrumb col-xs-12">
                            <nav aria-label="breadcrumb percorso di navigazione">
                                <ul
                                    class="breadcrumb visible-sm-block visible-md-block visible-lg-block inail-breadcrumb">
                                    <li role="listitem">
                                        <a href="javascript:void(0)" class="inail-text-link-1-semibold">
                                            Livello 1
                                        </a>
                                    </li>
                                    <li role="listitem">
                                        <a href="javascript:void(0)" class="inail-text-link-1-semibold">
                                            Livello 2
                                        </a>
                                    </li>
                                    <li role="listitem">
                                        <a href="javascript:void(0)"
                                            class="inail-breadcrumb-active inail-text-link-1-semibold"
                                            aria-current="page">
                                            Livello 3
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <main id="contenutoPrincipale" class="p-0">
                            <!-- TABELLA -->
                            <div class="col-xs-12">
                                <div>
                                    <div class="tabella table-responsive inail-table">
                                        <div class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft"
                                            id="titolo-tabella">Titolo Tabella</div>
                                        <a href="#1"
                                            class="col-xs-3 col-sm-2 linkDettagli pull-right inail-text-link-1 p-0 m-0">
                                            Link
                                            <span class="fa fa-chevron-right"></span>
                                        </a>
                                        <div class="col-xs-12 caption noPaddingLeft marginBottom">
                                            <p class="inail-body-text-1 m-0">Descrizione lorem ipsum dolor sit amet
                                                massa vitae lacus, gravida tortor. vehicula, eu non urna. ac dui. odio
                                                dui malesuada amet, libero, Lorem urna viverra leo.</p>
                                        </div>
                                        <table id="tabella-base" class="table display tabella-base"
                                            aria-labelledby="titolo-tabella">

                                            <thead>
                                                <tr>

                                                    <th><span class="thLabel">ID Pratica </span></th>

                                                    <th><span class="thLabel">Stato</span></th>

                                                    <th><span class="thLabel">Richiedente</span></th>

                                                    <th><span class="thLabel">Data Invio</span></th>
                                                    <th>Azioni</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                <tr>
                                                    <td>Dato 1</td>
                                                    <td>Dato 1</td>
                                                    <td>Dato 1</td>
                                                    <td>Dato 1</td>
                                                    <td class="td-icons">
                                                        <button type="button" class="col-xs-8 p-0" data-toggle="tooltip"
                                                            data-original-title="Rimuovi elemento"
                                                            aria-label="Rimuovi elemento">
                                                            <span class="fa fa-trash-alt"></span>
                                                        </button>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>Dato 2</td>
                                                    <td>Dato 2</td>
                                                    <td>Dato 2</td>
                                                    <td>Dato 2</td>
                                                    <td class="td-icons">
                                                        <button type="button" class="col-xs-8 p-0" data-toggle="tooltip"
                                                            data-original-title="Rimuovi elemento"
                                                            aria-label="Rimuovi elemento">
                                                            <span class="fa fa-trash-alt"></span>
                                                        </button>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>Dato 3</td>
                                                    <td>Dato 3</td>
                                                    <td>Dato 3</td>
                                                    <td>Dato 3</td>
                                                    <td class="td-icons">
                                                        <button type="button" class="col-xs-8 p-0" data-toggle="tooltip"
                                                            data-original-title="Rimuovi elemento"
                                                            aria-label="Rimuovi elemento">
                                                            <span class="fa fa-trash-alt"></span>
                                                        </button>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>Dato 4</td>
                                                    <td>Dato 4</td>
                                                    <td>Dato 4</td>
                                                    <td>Dato 4</td>
                                                    <td class="td-icons">
                                                        <button type="button" class="col-xs-8 p-0" data-toggle="tooltip"
                                                            data-original-title="Rimuovi elemento"
                                                            aria-label="Rimuovi elemento">
                                                            <span class="fa fa-trash-alt"></span>
                                                        </button>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </main>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</body>

</html>
`})})]})}function m(n={}){const{wrapper:t}={...a(),...n.components};return t?i.jsx(t,{...n,children:i.jsx(s,{...n})}):s(n)}export{m as default};
