import{b as h}from"./Utilities-DayKp0i-.js";const z=`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 B(){return`<div class="panel panel-default panel-badge panel-badge-servizi-online col-xs-12 col-md-6 inail-badge">
	<div class="panel-body">
		<h4>
			<a title="Rappresentante dei lavoratori per la sicurezza" href="javascript:void(0)" class="inail-button-link">Rappresentante dei lavoratori per la sicurezza (RLS)</a>
		</h4>
		<p>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.</p>
		<div id="moduli-documenti-accordion-1" class="row accordion-gray">
			<div class="row head-accordion-gray">
				<div class="accordion-title">
					<button title="Espandi/riduci elemento" type="button" data-toggle="collapse" data-target="#moduli-documenti-panel-servizi" aria-expanded="false">
						<strong class="pull-left">Moduli e documenti utili</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="region">
						<ul>
							<li>
								<a href="javascript:void(0)" class="inail-button-link">Dichiarazione Rls - guida applicativa azienda</a>
							</li>
							<li>
								<a href="javascript:void(0)" class="inail-button-link">Modulo comunicazione Rls</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
<button class="inail-button inail-button-primary inail-button-info inail-button-footer-modal">Accedi al servizio online</button>
</div>`}function C(){return`<div class="panel panel-default panel-badge col-xs-12 col-md-6 inail-badge">
	<div class="panel-body">
		<h4>
			<a title="Ottenere le prestazioni riabilitative e di rinserimento" href="javascript:void(0)" class="inail-button-link">Ottenere le prestazioni riabilitative e di rinserimento</a>
		</h4>
		<p>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</p>
		<div id="moduli-documenti-accordion-2" class="row accordion-gray">
			<div class="row head-accordion-gray"  data-toggle="collapse" data-target="#moduli-documenti-panel-approfondimento" role="heading" aria-level="4">
				<div class="accordion-title">
					<button title="Espandi/riduci elemento" type="button" data-toggle="collapse" data-target="#moduli-documenti-panel-approfondimento" aria-expanded="false">
						<strong class="pull-left">Moduli e documenti utili</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="region">
						<ul>
							<li>
								<a href="javascript:void(0)" class="inail-button-link">Moduli e modelli relativi alle prestazioni protesiche e riabilitative</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
<button class="inail-button inail-button-primary inail-button-footer-modal">Maggiori informazioni</button>
</div>`}function x(){return`
	<div class="panel panel-default panel-badge col-xs-12 col-md-6 inail-badge">
		<div class="panel-body">
			<h4 class="inail-title-h4">
				<a title="Comunicatori" href="javascript:void(0)" class="inail-button-link">Comunicatori</a>
			</h4>
			<p>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.</p>
			<div class="row accordion-gray">
				<div class="row head-accordion-gray" data-toggle="collapse" data-target="#area-collaborazione-panel-modale" role="heading" aria-level="4">
					<div class="accordion-title">
						<button title="Espandi/riduci elemento" type="button" data-toggle="collapse" data-target="#area-collaborazione-panel-modale" aria-expanded="false">
							<strong class="pull-left">Moduli e documenti utili</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="region">
							<ul>
								<li>
									<a href="javascript:void(0)" class="inail-button-link">Elenco comunicatori regionali</a>
								</li>
								<li>
									<a href="javascript:void(0)" class="inail-button-link">Glossario</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<button class="inail-button inail-button-primary inail-button-footer-modal" data-toggle="modal" data-target="#approfondimento-modale">Maggiori informazioni</button>
		</div>


	<!-- Modale -->
	<div class="modal fade inail-modale" role="dialog" id="approfondimento-modale" tabindex="-1" aria-labelledby="approfondimento-modale">
	<div class="vertical-alignment-helper">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="inail-title-h4 pull-left">Titolo modale</h4>
					<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>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 k(){return`<div class="panel panel-default panel-badge col-xs-12 col-md-6 inail-badge">
	<div class="panel-body">
		<h4 class="inail-title-h4">Ufficio I - Coordinamento legislativo e Supporto amministrativo</h4>
		<p>
			<strong>Dirigente</strong> : G. Cortese
			<br>
			<strong>Vicario</strong> : V. Celsi
			<br>
			<strong>Responsabile processi</strong> : Valentina Celsi, Micaela Fiorello
			<br>
		</p>
		<button class="inail-button-link inail-button-badge-light">Dettaglio processi</button>
	</div>
</div>`}const w={title:"Componenti/Badge",parameters:{docs:{description:{component:y},mdxPage:z}},decorators:[a=>`<main id="contenutoPrincipale">${a()}</main>`]},e={name:"Badge con accesso ai servizi online",render:a=>B()},i={name:"Badge con accesso a pagine di approfondimento",render:a=>C()},o={name:"Badge con approfondimento nella modale",decorators:[(a,t)=>h(a,t,1,["assets/js/custom-modal.js"],!1)],parameters:{docs:{story:{inline:!1,iframeHeight:500}}},render:a=>x()},n={name:"Badge light",render:a=>k()};var l,r,d;e.parameters={...e.parameters,docs:{...(l=e.parameters)==null?void 0:l.docs,source:{originalSource:`{
  name: "Badge con accesso ai servizi online",
  render: args => CreateBadgeServiziOnline()
}`,...(d=(r=e.parameters)==null?void 0:r.docs)==null?void 0:d.source}}};var s,c,p;i.parameters={...i.parameters,docs:{...(s=i.parameters)==null?void 0:s.docs,source:{originalSource:`{
  name: "Badge con accesso a pagine di approfondimento",
  render: args => CreateBadgePages()
}`,...(p=(c=i.parameters)==null?void 0:c.docs)==null?void 0:p.source}}};var u,m,g;o.parameters={...o.parameters,docs:{...(u=o.parameters)==null?void 0:u.docs,source:{originalSource:`{
  name: "Badge con approfondimento nella modale",
  decorators: [(story, context) => addDecorator(story, context, 1, ["assets/js/custom-modal.js"], false)],
  parameters: {
    docs: {
      story: {
        inline: false,
        iframeHeight: 500
      }
    }
  },
  render: args => CreateBadgeModal()
}`,...(g=(m=o.parameters)==null?void 0:m.docs)==null?void 0:g.source}}};var v,b,f;n.parameters={...n.parameters,docs:{...(v=n.parameters)==null?void 0:v.docs,source:{originalSource:`{
  name: "Badge light",
  render: args => CreateBadgeLight()
}`,...(f=(b=n.parameters)==null?void 0:b.docs)==null?void 0:f.source}}};const j=["BadgeServiziOnline","BadgePages","BadgeModal","BadgeLight"];export{n as BadgeLight,o as BadgeModal,i as BadgePages,e as BadgeServiziOnline,j as __namedExportsOrder,w as default};
