<div class="rtds-background-01 rtds-border-b rtds-border-gray-03 rtds-px-4 rtds-py-3 rtds-space-y-2">
<p class="rtds-text-sm rtds-content-02">
<strong>Test widget Procedimenti</strong> — carica <code>core.css</code> + <code>servizi.css</code>.
Questa è la pagina di integrazione più completa: <code>widget--procedimento</code>
include <code>struttura-gerarchica</code> → <code>accordion-smart</code> +
<code>card-smart--selezione-procedimento</code> + <code>trascinamento-oggetti</code>.
</p>
<nav aria-label="Sezioni di test">
<ul class="rtds-flex rtds-flex-wrap rtds-gap-3 rtds-list-none rtds-p-0 rtds-m-0 rtds-text-sm">
<li><a href="#procedimento" class="rtds-link">Dettaglio procedimento</a></li>
<li><a href="#risultati" class="rtds-link">Risultati procedimenti</a></li>
</ul>
</nav>
</div>
<div class="rtds-space-y-16 rtds-py-8">
<section id="procedimento">
<div id="proc-h" class="rtds-border-b rtds-border-gray-03 rtds-pb-2 rtds-mb-6">
<h2 class="rtds-text-xl rtds-font-bold">1. Widget — Dettaglio procedimento</h2>
<p class="rtds-text-sm rtds-content-02 rtds-mt-1">Componente più complesso: struttura-gerarchica con accordion nested, card-smart selezione, trascinamento-oggetti. Test di integrazione completo.</p>
</div>
<div class="rtds-widget">
<div class="rtds-container lg:rtds-gap-4 rtds-py-8 lg:rtds-px-12 xl:rtds-px-16 rtds-space-y-8 lg:rtds-space-y-12 xl:rtds-space-y-16">
<div class="rtds-grid rtds-gap-3 lg:rtds-gap-4">
<a href="" class="rtds-link-back rtds-content-03 hover:rtds-underline rtds-inline-flex rtds-items-center rtds-text-sm">
<svg class="rtds-icon rtds-stroke-current rtds-w-4 rtds-h-4 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-left" />
</svg>
Torna ai risultati della ricerca
</a>
<h1 class="rtds-heading-2">Procedimenti</h1>
</div>
<div class="rtds-grid rtds-gap-3 lg:rtds-gap-4">
<section class="rtds-widget-box">
<div class="rtds-widget-box__header">
<h2 class="rtds-widget-box__title">Dato semplice</h2>
</div>
<div class="rtds-widget-box__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
quos.
</p>
<p>
Ufficio: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
quos.
</p>
<p>
Email: <a href="mailto:info@example.com">info@example.com</a>
</p>
<p>
Telefono: <a href="tel:0123456789">0123456789</a>
</p>
</div>
<div class="rtds-widget-box__header">
<h2 class="rtds-widget-box__title">Dato semplice con lista</h2>
</div>
<div class="rtds-widget-box__content">
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
</ul>
</div>
</section>
<section class="rtds-widget-box">
<div class="rtds-widget-box__header">
<h2 class="rtds-widget-box__title">Dato semplice</h2>
</div>
<div class="rtds-widget-box__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
quos.
</p>
<p>
Ufficio: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
quos.
</p>
<p>
Email: <a href="mailto:info@example.com">info@example.com</a>
</p>
<p>
Telefono: <a href="tel:0123456789">0123456789</a>
</p>
</div>
<div class="rtds-widget-box__header">
<h2 class="rtds-widget-box__title">Dato semplice con lista</h2>
</div>
<div class="rtds-widget-box__content">
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</section>
<section id="risultati">
<div id="risultati-h" class="rtds-border-b rtds-border-gray-03 rtds-pb-2 rtds-mb-6">
<h2 class="rtds-text-xl rtds-font-bold">2. Widget — Risultati procedimenti</h2>
<p class="rtds-text-sm rtds-content-02 rtds-mt-1">Lista di risultati di ricerca procedimenti.</p>
</div>
<div class="rtds-widget">
<!-- navigazione sezioni WIDGET -->
<nav class="rtds-widget-nav" aria-label="Sezioni atti">
<ul class="rtds-widget-nav__list">
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
is-active" id="widget-nav-tab-1">
<span class="rtds-tab__label">Dalla giunta</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-2">
<span class="rtds-tab__label">Dal Presidente</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">
<span class="rtds-tab__label">dai Dirigenti</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">
<span class="rtds-tab__label">di Protezione Civile (dal 20/01/22)</span>
</a>
</li>
</ul>
</nav>
<div class="rtds-container-sm rtds-py-8 lg:rtds-px-12 xl:rtds-px-16">
<div class="rtds-grid rtds-gap-8 xl:rtds-gap-12">
<!-- testata WIDGET -->
<div class="rtds-flex rtds-items-center rtds-justify-between">
<h1 class="rtds-heading-2">Procedimenti</h1>
</div>
<!-- RICERCA -->
<section class="rtds-grid rtds-gap-8 lg:rtds-gap-12">
<!-- SEARCH -->
<div class="rtds-accordion rtds-p-0 rtds-accordion--widget">
<h2 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-p-2 rtds-text-base rtds-background-03">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all" aria-controls="accordionSearch-1" id="accordionSearch1id">
<span class="rtds-accordion__trigger-label">
Ricerca avanzata
</span>
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
</button>
</h2>
<div id="accordionSearch-1" role="region" aria-labelledby="accordionSearch1id" class="rtds-accordion__pane rtds-transition-all rtds-px-2">
<form name="search-form">
<div class="rtds-grid rtds-gap-6">
<!-- ROW 1 -->
<div class="rtds-field-row">
<!-- FIELDSET DATA -->
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">
Data atto
</legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoStart" class="rtds-input-field__label rtds-sr-only">
Data inizio atto
</label>
<div class="rtds-input">
<input id="attoStart" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataInizioAtto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDataInizioAtto">
Anno inizio ricerca - formato gg/mm/aaaa
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoEnd" class="rtds-input-field__label rtds-sr-only">
Data fine atto
</label>
<div class="rtds-input">
<input id="attoEnd" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataFineAtto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDataFineAtto">
Anno fine ricerca - formato gg/mm/aaaa
</span>
</span>
</div>
</div>
</fieldset>
<!-- FIELDSET NUMERO ATTO -->
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">
Numero atto
</legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoNumberStart" class="rtds-input-field__label rtds-sr-only">
Numero atto - inizio
</label>
<div class="rtds-input">
<input id="attoNumberStart" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoInizio">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputNumeroAttoInizio">
Da numero
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoNumberEnd" class="rtds-input-field__label rtds-sr-only">
Numero atto - fine
</label>
<div class="rtds-input">
<input id="attoNumberEnd" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoFine">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputNumeroAttoFine">
A numero
</span>
</span>
</div>
</div>
</fieldset>
</div>
<!-- ROW 2 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-gap-1 ">
<label for="oggetto" class="rtds-input-field__label">
Oggetto
</label>
<div class="rtds-input">
<input id="oggetto" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputOggetto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputOggetto">
Ricerca esatta del testo inserito
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Assessore
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectAssessore">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectAssessore">
Seleziona nome dell'assessore
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Tipologia Atto
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectAtto">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectAtto">
Ricerca tipologia atto
</span>
</span>
</div>
</div>
<!-- ROW 3 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Struttura di vertice
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectStrutturaVertice">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectStrutturaVertice">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="procedimento" class="rtds-input-field__label">
Procedimento
</label>
<div class="rtds-input">
<input id="procedimento" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputProcedimento">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputProcedimento">
Ricerca tipologia procedimento
</span>
</span>
</div>
</div>
<!-- ROW 4 - DEM0 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Field demo 1
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectDemo1">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectDemo1">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="demo2" class="rtds-input-field__label">
Field demo 2
</label>
<div class="rtds-input">
<input id="demo2" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo2">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDemo2">
Ricerca tipologia procedimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Field demo 3
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectDemo3">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectDemo3">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="demo4" class="rtds-input-field__label">
Field demo 4
</label>
<div class="rtds-input">
<input id="demo4" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo4">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDemo4">
Ricerca tipologia procedimento
</span>
</span>
</div>
</div>
<!-- ROW ACTIONS -->
<div class="rtds-form-actions rtds-flex rtds-justify-start">
<button type="submit" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--secondary">
Cerca
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- FILTERS -->
<ul class="rtds-flex rtds-flex-wrap rtds-gap-2" aria-label="Filtri attivi">
<li><span class="rtds-chip has-button-close rtds-chip--filter">
ALESSANDRA NARDINI
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi ALESSANDRA NARDINI</span>
</button>
</span></li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Data atto inizio: 23/05/2024
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Data atto inizio: 23/05/2024</span>
</button>
</span>
</li>
<li><span class="rtds-chip has-button-close rtds-chip--filter">
Oggetto: Atto
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Oggetto: Atto</span>
</button>
</span></li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Tipologia atto: Lorem ipsum dolor sit
amet
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Tipologia atto: Lorem ipsum dolor sit
amet</span>
</button>
</span>
</li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Numero atto - da numero: 12
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Numero atto - da numero: 12</span>
</button>
</span>
</li>
</ul>
</section>
<!-- CONTENUTO RICERCA -->
<section class="rtds-grid rtds-gap-4">
<!-- HEADING PER MESSAGGIO DI CARICAMENTO RISULTATI/LISTA RISULTATI TROVATI
IN FASE CARICAMENTO, aria-busy = true,
RISULTATI CARICATI, aria-busy = false,
NO RISULTATI, aria-busy = false
In questo caso il contenuto di rtds-loading-status è il titolo con il numero di risultati
-->
<div class="rtds-loading-status" aria-live="polite" aria-busy="false" role="status">
<!-- HEADING PER RISULTATI -->
<h2 class="rtds-heading-3"><span class="rtds-sr-only">Risultati: </span>2632 <span class="rtds-font-normal">Procedimenti</span></h2>
</div>
<!-- CONTAINER PER EMPTY STATE - HA CONTENUTO SOLO SE NON CI SONO RISULTATI - DEVE ESSERE SEMPRE PRESENTE - CON I RISULTATI HA CLASSE -> rtds-sr-only -->
<div class="rtds-empty-state rtds-grid rtds-gap-4 rtds-sr-only" aria-live="assertive" aria-atomic="true"></div>
<!-- CONTAINER PER RISULTATI -->
<div class="rtds-grid rtds-gap-4">
<article class="rtds-card rtds-card--information-02 rtds-card--widget is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Procedimenti riguardanti la gestione dei beni civici collettivi
</a>
</h3>
</div>
<div class="rtds-card__description">
<p>
<strong>Struttura di vertice:</strong> AGRICOLTURA E SVILUPPO RURALE
</p>
</div>
<div class="rtds-space-y-2 -rtds-ml-3 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s">
Dettaglio
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
<article class="rtds-card rtds-card--information-02 rtds-card--widget is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Procedimenti riguardanti la gestione dei beni civici collettivi
</a>
</h3>
</div>
<div class="rtds-card__description">
<p>
<strong>Struttura di vertice:</strong> AGRICOLTURA E SVILUPPO RURALE
</p>
</div>
<div class="rtds-space-y-2 -rtds-ml-3 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s">
Dettaglio
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
<article class="rtds-card rtds-card--information-02 rtds-card--widget is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Procedimenti riguardanti la gestione dei beni civici collettivi
</a>
</h3>
</div>
<div class="rtds-card__description">
<p>
<strong>Struttura di vertice:</strong> AGRICOLTURA E SVILUPPO RURALE
</p>
</div>
<div class="rtds-space-y-2 -rtds-ml-3 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s">
Dettaglio
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
<article class="rtds-card rtds-card--information-02 rtds-card--widget is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Procedimenti riguardanti la gestione dei beni civici collettivi
</a>
</h3>
</div>
<div class="rtds-card__description">
<p>
<strong>Struttura di vertice:</strong> AGRICOLTURA E SVILUPPO RURALE
</p>
</div>
<div class="rtds-space-y-2 -rtds-ml-3 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s">
Dettaglio
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
<article class="rtds-card rtds-card--information-02 rtds-card--widget is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Procedimenti riguardanti la gestione dei beni civici collettivi
</a>
</h3>
</div>
<div class="rtds-card__description">
<p>
<strong>Struttura di vertice:</strong> AGRICOLTURA E SVILUPPO RURALE
</p>
</div>
<div class="rtds-space-y-2 -rtds-ml-3 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s">
Dettaglio
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
</div>
</section>
<!-- PAGINAZIONE -->
<nav class="rtds-pagination rtds-flex-wrap rtds-justify-center" role="navigation" aria-label="Paginazione">
<ul class="rtds-pagination__list rtds-justify-center">
<li>
<a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Prima pagina">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-double-left" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina precedente">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-left" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 1">1</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text rtds-background-primary rtds-border-primary rtds-text-white hover:rtds-content-01" href="#" aria-label="Pagina corrente, pagina 2" aria-current="page">2</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 3">3</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 4">4</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina successiva">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Ultima pagina">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-double-right" />
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
</div>
{#
Test widget Procedimenti — carica core.css + servizi.css (via _preview-core-servizi.njk)
Verifica il funzionamento del widget per i procedimenti:
— widget--procedimento (dettaglio procedimento con struttura-gerarchica)
— widget--risultati-procedimenti (lista risultati procedimenti)
Il widget--procedimento è il più complesso: integra struttura-gerarchica,
che a sua volta include accordion-smart, card-smart--selezione-procedimento
e trascinamento-oggetti. Questa pagina è il test di integrazione più completo.
#}
{% macro testSection(id, title, note) %}
<div id="{{ id }}" class="rtds-border-b rtds-border-gray-03 rtds-pb-2 rtds-mb-6">
<h2 class="rtds-text-xl rtds-font-bold">{{ title }}</h2>
{% if note %}<p class="rtds-text-sm rtds-content-02 rtds-mt-1">{{ note }}</p>{% endif %}
</div>
{% endmacro %}
{# Banner + indice #}
<div class="rtds-background-01 rtds-border-b rtds-border-gray-03 rtds-px-4 rtds-py-3 rtds-space-y-2">
<p class="rtds-text-sm rtds-content-02">
<strong>Test widget Procedimenti</strong> — carica <code>core.css</code> + <code>servizi.css</code>.
Questa è la pagina di integrazione più completa: <code>widget--procedimento</code>
include <code>struttura-gerarchica</code> → <code>accordion-smart</code> +
<code>card-smart--selezione-procedimento</code> + <code>trascinamento-oggetti</code>.
</p>
<nav aria-label="Sezioni di test">
<ul class="rtds-flex rtds-flex-wrap rtds-gap-3 rtds-list-none rtds-p-0 rtds-m-0 rtds-text-sm">
<li><a href="#procedimento" class="rtds-link">Dettaglio procedimento</a></li>
<li><a href="#risultati" class="rtds-link">Risultati procedimenti</a></li>
</ul>
</nav>
</div>
<div class="rtds-space-y-16 rtds-py-8">
{# ── 1. Dettaglio procedimento ─────────────────────────────────────────── #}
<section id="procedimento">
{{ testSection("proc-h", "1. Widget — Dettaglio procedimento",
"Componente più complesso: struttura-gerarchica con accordion nested, card-smart selezione, trascinamento-oggetti. Test di integrazione completo.") }}
{% render '@widget--procedimento', {}, true %}
</section>
{# ── 2. Risultati procedimenti ─────────────────────────────────────────── #}
<section id="risultati">
{{ testSection("risultati-h", "2. Widget — Risultati procedimenti",
"Lista di risultati di ricerca procedimenti.") }}
{% render '@widget--risultati-procedimenti', {}, true %}
</section>
</div>
/* No context defined. */
No notes defined.