<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">Gli atti della Giunta</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 testo Nessun risultato trovato
-->
<div class="rtds-loading-status" aria-live="polite" aria-busy="false" role="status">
<!-- HEADING PER RISULTATI - IN EMPTY STATE IL CONTENUTO è QUELLO QUI INDICATO -->
<h2 class="rtds-heading-3">Nessun risultato trovato</h2>
</div>
<!-- CONTAINER PER EMPTY STATE - HA CONTENUTO SOLO SE NON CI SONO RISULTATI - DEVE ESSERE SEMPRE PRESENTE - senza risultati non ha classe rtds-sr-only -->
<div class="rtds-empty-state rtds-grid rtds-gap-4" aria-live="assertive" aria-atomic="true">
<!-- CONTENUTO EMPTY STATE - PRESENTE SOLO SE NON CI SONO RISULTATI -->
<div class="rtds-font-bold rtds-text-center rtds-grid rtds-gap-8 rtds-justify-center rtds-justify-items-center rtds-py-20">
<svg class="rtds-icon rtds-fill-current rtds-w-16 rtds-h-16 rtds-content-03" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--exclamation-circle" />
</svg>
<h3 class="rtds-heading-4">Non ci sono risultati per questi criteri di ricerca</h3>
</div>
</div>
</section>
<!-- PAGINAZIONE -->
<nav class="rtds-pagination 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="Pagina iniziale">
<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="true">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="Pagina finale">
<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>
<div class="rtds-widget">
<!-- navigazione sezioni WIDGET -->
{% render '@widget-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">Gli atti della Giunta</h1>
</div>
<!-- RICERCA -->
<section class="rtds-grid rtds-gap-8 lg:rtds-gap-12">
<!-- SEARCH -->
{% render '@widget-search' %}
<!-- FILTERS -->
{% render '@widget-chip-filters' %}
</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 testo Nessun risultato trovato
-->
<div class="rtds-loading-status" aria-live="polite" aria-busy="false" role="status">
<!-- HEADING PER RISULTATI - IN EMPTY STATE IL CONTENUTO è QUELLO QUI INDICATO -->
<h2 class="rtds-heading-3">Nessun risultato trovato</h2>
</div>
<!-- CONTAINER PER EMPTY STATE - HA CONTENUTO SOLO SE NON CI SONO RISULTATI - DEVE ESSERE SEMPRE PRESENTE - senza risultati non ha classe rtds-sr-only -->
<div class="rtds-empty-state rtds-grid rtds-gap-4" aria-live="assertive" aria-atomic="true">
<!-- CONTENUTO EMPTY STATE - PRESENTE SOLO SE NON CI SONO RISULTATI -->
<div class="rtds-font-bold rtds-text-center rtds-grid rtds-gap-8 rtds-justify-center rtds-justify-items-center rtds-py-20">
{% render '@icon',{id: 'outline--exclamation-circle', size: 'rtds-w-16 rtds-h-16', classes: 'rtds-content-03'},true %}
<h3 class="rtds-heading-4">Non ci sono risultati per questi criteri di ricerca</h3>
</div>
</div>
</section>
<!-- PAGINAZIONE -->
{% render '@pagination',{ centered: 'true' }, true %}
</div>
</div>
</div>
/* No context defined. */
L’elemento deve essere sempre presente, anche quando non ci sono risultati. In caso di risultati, il div non ha contenuto e presenta la classe rtds-sr-only. In caso di assenza di risultati, il div ha contenuto e non presenta la classe rtds-sr-only.
Il widget di ricerca è composto da diverse sezioni:
Durante il caricamento dei risultati:
rtds-loading-status deve avere:aria-live="polite" per annunciare i cambiamentiaria-busy="true" per indicare che è in corso un’operazionerole="status" per definire il ruoloQuando i risultati sono caricati:
rtds-loading-status deve avere:aria-busy="false"rtds-sr-only)rtds-sr-onlyQuando non ci sono risultati:
rtds-loading-status mantiene aria-busy="false"rtds-sr-onlyaria-live="assertive" e aria-atomic="true" per annunciare immediatamente l’assenza di risultatiaria-live appropriatamente:polite per aggiornamenti non critici (caricamento e risultati)assertive per l’empty state