import{a as B}from"./Utilities-CQhZFhp5.js";const x=`L'elemento badge è una soluzione visiva che permette di comprimere, in un unico elemento, una serie di informazioni utili. Permette di avere un'overview su un contenuto prima di accedere alla pagina specifica. Il loro stile compatto da la possibilità di avere più badge in un'unica area permettendo così la creazione di una pagina vetrina su una serie di servizi e prodotti.
Il badge è composto da:
- Titolo: con eventuale link alla pagina di approfondimento (max 90 caratteri)
- Breve descrizione (max 260 caratteri)
- Accordion: con con la funzione di raccoglitore di link a moduli o cartelle. Se non necessario è possibile escludere l'accordion. Può avere due tipi di label:
 - Moduli e documenti utili: raccoglie link a supporto sullo specifico argomento
 - Aree di collaborazione: raccoglie i link a documenti o cartelle presenti su repository esterni.
- Bottone con Call to action: Se non necessario è possibile escludere il bottone. In base alla tipologia di badge è possibile avere le seguenti Call to action:
  - Accedi ai servizi online: per accedere al servizio relativo
  - Maggiori informazioni: per accedere alla pagina o modale contenete la parte informativa completa del relativo argomento

`,y="";function k(e,i,o,a){return`<div class="panel panel-default panel-badge panel-badge-servizi-online col-xs-12 col-md-6 inail-badge" role="group" aria-labelledby="titolo-badge-1">
	<div class="panel-body">
		<div class="inail-card-title" id="titolo-badge-1">
			<div class="inail-card-title">${e}</div>
		</div>
		<p>${i}</p>
		<div id="moduli-documenti-accordion-1" class="row accordion-gray">
			<div class="row head-accordion-gray">
				<div class="accordion-title">
					<button class="d-flex align-items-center justify-content-between" type="button" data-toggle="collapse" data-target="#moduli-documenti-panel-servizi" aria-expanded="false">
						<strong class="pull-left" id="titolo-pannello-1">${o}</strong>
						<span class="fa fa-solid fa-chevron-down fa-lg pull-right"></span>
					</button>
					<div id="moduli-documenti-panel-servizi" class="row collapse panel-body" role="group" aria-labelledby="titolo-pannello-1">
						<ul>
							<li>
								<a href="javascript:void(0)" class="inail-text-link-1-semibold ml-0 pl-0">Dichiarazione Rls - guida applicativa azienda</a>
							</li>
							<li>
								<a href="javascript:void(0)" class="inail-text-link-1-semibold ml-0 pl-0">Modulo comunicazione Rls</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
    <a class="inail-text-link-1-semibold ml-0 pl-0" href="javascript:void(0)">${a}</a>
</div>`}function T(e,i,o,a){return`<div class="panel panel-default panel-badge col-xs-12 col-md-6 inail-badge" role="group" aria-labelledby="titolo-badge-2">
	<div class="panel-body">
		<div class="inail-card-title" id="titolo-badge-2">
			<div class="inail-card-title">${e}</div>
		</div>
		<p>${i}</p>
		<div id="moduli-documenti-accordion-2" class="row accordion-gray">
			<div class="row head-accordion-gray">
				<div class="accordion-title">
					<button class="d-flex align-items-center justify-content-between" type="button" data-toggle="collapse" data-target="#moduli-documenti-panel-approfondimento" aria-expanded="false">
						<strong class="pull-left" id="titolo-pannello-2">${o}</strong>
						<span class="fa fa-solid fa-chevron-down fa-lg pull-right"></span>
					</button>
					<div id="moduli-documenti-panel-approfondimento" class="row collapse panel-body" role="group" aria-labelledby="titolo-pannello-2">
						<ul>
							<li>
								<a href="javascript:void(0)" class="inail-text-link-1-semibold ml-0 pl-0">Moduli e modelli relativi alle prestazioni protesiche e riabilitative</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
<a class="inail-text-link-1-semibold ml-0 pl-0"  href="javascript:void(0)">${a} 
<span class="sr-only"> su come ottenere le prestazioni riabilitative e di rinserimento </span>
</a>
</div>`}function P(e,i,o,a){return`
	<div class="panel panel-default panel-badge col-xs-12 col-md-6 inail-badge" role="group" aria-labelledby="titolo-badge-3">
    <div class="panel-body">
        <div class="inail-card-title" id="titolo-badge-3">
            <div class="inail-card-title">${e}</div>
        </div>

            <p>${i}</p>

        <div class="row accordion-gray">
            <div class="row head-accordion-gray">
                <div class="accordion-title">
                    <button class="d-flex align-items-center justify-content-between" type="button" data-toggle="collapse" data-target="#area-collaborazione-panel-modale" aria-expanded="false">
                        <strong class="pull-left" id="titolo-pannello-3">${o}</strong>
                        <span class="fa fa-solid fa-chevron-down fa-lg pull-right"></span>
                    </button>
                </div>
                <div id="area-collaborazione-panel-modale" class="row collapse panel-body" role="group" aria-labelledby="titolo-pannello-3">
                    <ul>
                        <li>
                            <a href="javascript:void(0)" class="inail-text-link-1-semibold ml-0 pl-0">Elenco comunicatori regionali</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="inail-text-link-1-semibold ml-0 pl-0">
                                Glossario
                                <span class="sr-only"> dei termini e delle definizioni utilizzati nelle attività di comunicazione dell’Istituto</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <button class="inail-button inail-button-primary inail-button-footer-modal" data-toggle="modal" data-target="#approfondimento-modale">
            ${a}
        </button>
    </div>
</div>

        


	<!-- Modale -->
	<div class="modal fade inail-modale" role="dialog" id="approfondimento-modale" tabindex="-1" aria-label='_'>
	<div class="vertical-alignment-helper">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<div class="inail-modale-title pull-left" tabindex="-1">Titolo modale</div>
					<button type="button" class="close pull-right" data-dismiss="modal" aria-label="Chiudi finestra di dialogo">
						<span aria-hidden="true"><i class="fa-solid fa-xmark"></i></span>
					</button>
				</div>
				<div class="modal-body">
					<div class="row">
						<p class="inail-body-text-1">Lorem ipsum dolor sit amet</p>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="inail-button inail-button-primary pull-right">OK</button>
				</div>
			</div>
		</div>
	</div>
</div>`}function w(e,i){return`<div class="panel panel-default panel-badge col-xs-12 col-md-6 inail-badge" role="group" aria-labelledby="titolo-badge-4">
	<div class="panel-body">
		<div class="inail-card-title" id="titolo-badge-4">${e}</div>
		<p>
			<strong>Dirigente</strong> : Alessia Pinzello
			<br>
			<strong>Vicario</strong> : Giuditta Cipollone
			<br>
			<strong>Responsabile processi</strong> : Valentina Celsi, Micaela Fiorello
			<br>
		</p>
		<a class="inail-text-link-1-semibold ml-0 pl-0"  href="javascript:void(0)">${i} 
		<span class="sr-only"> dell’Ufficio I - Coordinamento legislativo e Supporto amministrativo </span>
		</a>
	</div>
</div>`}const I={title:"Componenti/Badge",parameters:{docs:{description:{component:y},mdxPage:x,showAccessibility:!0}},decorators:[e=>`<main id="contenutoPrincipale">${e()}</main>`]},t={name:"Badge con accesso ai servizi online",argTypes:{titoloBadge:{control:"text",description:"Titolo del badge."},descrizione:{control:"text",description:"Descrizione del badge."},titoloPanello:{control:"text",description:"Titolo del panello espandibile."},etichettalink:{control:"text",description:"Etichetta del button."}},args:{titoloBadge:"Rappresentante dei lavoratori per la sicurezza (RLS)",descrizione:"Il servizio ti permette di comunicare all'Inail i nominativi dei Rappresentanti della sicurezza sei Lavoratori per ogni unità produttiva e di modificare le comunicazioni effettuate precedentemente, aggiungendo anche altri nominativi per la medesima unità produttiva.",titoloPanello:"Moduli e documenti utili",etichettalink:"Accedi al servizio online"},render:e=>k(e.titoloBadge,e.descrizione,e.titoloPanello,e.etichettalink)},l={name:"Badge con accesso a pagine di approfondimento",argTypes:{titoloBadge:{control:"text",description:"Titolo del badge."},descrizione:{control:"text",description:"Descrizione del badge."},titoloPanello:{control:"text",description:"Titolo del panello espandibile."},etichettalink:{control:"text",description:"Etichetta del button."}},args:{titoloBadge:"Ottenere le prestazioni riabilitative e di rinserimento",descrizione:"L'Inail tutela i lavoratori che subiscono un infortunio sul lavoro o contraggono una malattia professionale mediante l'erogazione di prestazioni economiche, sanitarie e integrative, anche se il datore di lavoro non ha versato regolarmente il premio assicuraivo.",titoloPanello:"Moduli e documenti utili",etichettalink:"Maggiori informazioni"},render:e=>T(e.titoloBadge,e.descrizione,e.titoloPanello,e.etichettalink)},n={name:"Badge con approfondimento nella modale",decorators:[(e,i)=>B(e,i,1,["https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-modal.js"],!1)],parameters:{docs:{story:{inline:!1,iframeHeight:500}}},argTypes:{titoloBadge:{control:"text",description:"Titolo del badge."},descrizione:{control:"text",description:"Descrizione del badge."},titoloPanello:{control:"text",description:"Titolo del panello espandibile."},etichettaBottone:{control:"text",description:"Etichetta del button."}},args:{titoloBadge:"Comunicatori",descrizione:"Attività di comunicazione esterna che, attraverso il contatto diretto con utenti e stakeholder, costituisce un canale privilegiato di ascolto per la verifica del livello di soddisfazione del cliente e della percezione della qualità dei servizi erogati dall'Istituto.",titoloPanello:"Moduli e documenti utili",etichettaBottone:"Maggiori informazioni"},render:e=>P(e.titoloBadge,e.descrizione,e.titoloPanello,e.etichettaBottone)},r={name:"Badge light",argTypes:{titoloBadge:{control:"text",description:"Titolo del badge."},etichettaBadgeLink:{control:"text",description:"Etichetta del link."}},args:{titoloBadge:"Ufficio I – Acquisti IT e Servizi",etichettaBadgeLink:"Dettaglio processi"},render:e=>w(e.titoloBadge,e.etichettaBadgeLink)};var d,s,c;t.parameters={...t.parameters,docs:{...(d=t.parameters)==null?void 0:d.docs,source:{originalSource:`{
  name: "Badge con accesso ai servizi online",
  argTypes: {
    titoloBadge: {
      control: 'text',
      description: 'Titolo del badge.'
    },
    descrizione: {
      control: 'text',
      description: 'Descrizione del badge.'
    },
    titoloPanello: {
      control: 'text',
      description: 'Titolo del panello espandibile.'
    },
    etichettalink: {
      control: "text",
      description: "Etichetta del button."
    }
  },
  args: {
    titoloBadge: 'Rappresentante dei lavoratori per la sicurezza (RLS)',
    descrizione: "Il servizio ti permette di comunicare all'Inail i nominativi dei Rappresentanti della sicurezza sei Lavoratori per ogni unità produttiva e di modificare le comunicazioni effettuate precedentemente, aggiungendo anche altri nominativi per la medesima unità produttiva.",
    titoloPanello: 'Moduli e documenti utili',
    etichettalink: 'Accedi al servizio online'
  },
  render: args => CreateBadgeServiziOnline(args.titoloBadge, args.descrizione, args.titoloPanello, args.etichettalink)
}`,...(c=(s=t.parameters)==null?void 0:s.docs)==null?void 0:c.source}}};var p,g,u;l.parameters={...l.parameters,docs:{...(p=l.parameters)==null?void 0:p.docs,source:{originalSource:`{
  name: "Badge con accesso a pagine di approfondimento",
  argTypes: {
    titoloBadge: {
      control: 'text',
      description: 'Titolo del badge.'
    },
    descrizione: {
      control: 'text',
      description: 'Descrizione del badge.'
    },
    titoloPanello: {
      control: 'text',
      description: 'Titolo del panello espandibile.'
    },
    etichettalink: {
      control: "text",
      description: "Etichetta del button."
    }
  },
  args: {
    titoloBadge: 'Ottenere le prestazioni riabilitative e di rinserimento',
    descrizione: "L'Inail tutela i lavoratori che subiscono un infortunio sul lavoro o contraggono una malattia professionale mediante l'erogazione di prestazioni economiche, sanitarie e integrative, anche se il datore di lavoro non ha versato regolarmente il premio assicuraivo.",
    titoloPanello: 'Moduli e documenti utili',
    etichettalink: 'Maggiori informazioni'
  },
  render: args => CreateBadgePages(args.titoloBadge, args.descrizione, args.titoloPanello, args.etichettalink)
}`,...(u=(g=l.parameters)==null?void 0:g.docs)==null?void 0:u.source}}};var m,v,b;n.parameters={...n.parameters,docs:{...(m=n.parameters)==null?void 0:m.docs,source:{originalSource:`{
  name: "Badge con approfondimento nella modale",
  decorators: [(story, context) => addDecorator(story, context, 1, [\`\${process.env["VITE_WEBKIT_BASE_URL"]}static-webkit/js/custom-modal.js\`], false)],
  parameters: {
    docs: {
      story: {
        inline: false,
        iframeHeight: 500
      }
    }
  },
  argTypes: {
    titoloBadge: {
      control: 'text',
      description: 'Titolo del badge.'
    },
    descrizione: {
      control: 'text',
      description: 'Descrizione del badge.'
    },
    titoloPanello: {
      control: 'text',
      description: 'Titolo del panello espandibile.'
    },
    etichettaBottone: {
      control: "text",
      description: "Etichetta del button."
    }
  },
  args: {
    titoloBadge: 'Comunicatori',
    descrizione: "Attività di comunicazione esterna che, attraverso il contatto diretto con utenti e stakeholder, costituisce un canale privilegiato di ascolto per la verifica del livello di soddisfazione del cliente e della percezione della qualità dei servizi erogati dall'Istituto.",
    titoloPanello: 'Moduli e documenti utili',
    etichettaBottone: 'Maggiori informazioni'
  },
  render: args => CreateBadgeModal(args.titoloBadge, args.descrizione, args.titoloPanello, args.etichettaBottone)
}`,...(b=(v=n.parameters)==null?void 0:v.docs)==null?void 0:b.source}}};var f,z,h;r.parameters={...r.parameters,docs:{...(f=r.parameters)==null?void 0:f.docs,source:{originalSource:`{
  name: "Badge light",
  argTypes: {
    titoloBadge: {
      control: 'text',
      description: 'Titolo del badge.'
    },
    etichettaBadgeLink: {
      control: "text",
      description: "Etichetta del link."
    }
  },
  args: {
    titoloBadge: 'Ufficio I – Acquisti IT e Servizi',
    etichettaBadgeLink: 'Dettaglio processi'
  },
  render: args => CreateBadgeLight(args.titoloBadge, args.etichettaBadgeLink)
}`,...(h=(z=r.parameters)==null?void 0:z.docs)==null?void 0:h.source}}};const L=["BadgeServiziOnline","BadgePages","BadgeModal","BadgeLight"];export{r as BadgeLight,n as BadgeModal,l as BadgePages,t as BadgeServiziOnline,L as __namedExportsOrder,I as default};
