BS5: add form-select class to <select>

assets/src/components/ActionSelector.js

@@ -34,6 +34,7 @@ export default class ActionSelector extends HTMLElement {
 
         // Add the options from the actions object
         const select = this.querySelector('select');
+        select.classList.add('form-select');
         for (let a in this.actions) {
             let action = this.actions[a];
             let option = document.createElement("option");

assets/src/components/BaseLayers.js

@@ -31,7 +31,7 @@ export default class BaseLayers extends HTMLElement {
         this._template = () => html`
             ${mainLizmap.state.baseLayers.baseLayers.length > 1
                 ? keyed(mainLizmap.state.baseLayers.selectedBaseLayerName, html`
-                <select @change=${(event) => { mainLizmap.state.baseLayers.selectedBaseLayerName = event.target.value }}>
+                <select class="form-select" @change=${(event) => { mainLizmap.state.baseLayers.selectedBaseLayerName = event.target.value }}>
                     ${mainLizmap.state.baseLayers.baseLayers.map((config) =>
                     html`<option ?selected="${mainLizmap.state.baseLayers.selectedBaseLayerName === config.name}" value="${config.name}">${config.type === BaseLayerTypes.Empty ? lizDict['baselayer.empty.title'] : config.title}</option>`
                     )}

assets/src/components/MousePosition.js

@@ -55,7 +55,7 @@ export default class MousePosition extends HTMLElement {
                 <button class="btn btn-sm" title="${lizDict['mouseposition.removeCenterPoint']}" @click=${() => this._removeCenterPoint()}><i class="icon-refresh"></i></button>
             </div>
             <div class="coords-unit">
-                <select title="${lizDict['mouseposition.select']}" @change=${(event) => { this.displayUnit = event.target.value }}>
+                <select class="form-select" title="${lizDict['mouseposition.select']}" @change=${(event) => { this.displayUnit = event.target.value }}>
                     ${this._qgisProjectProjectionUnits === 'm' ? html`
                     <option selected value="m">${lizDict['mouseposition.units.m']}</option>` : ''}
                     ${ ['ft', 'us-ft'].includes(this._qgisProjectProjectionUnits) ? html`

assets/src/components/Print.js

@@ -129,12 +129,12 @@ export default class Print extends HTMLElement {
                 </tr>
                 <tr>
                     <td>
-                        <select id="print-template" @change=${(event) => { this.printTemplate = event.target.value }}>
+                        <select id="print-template" class="form-select" @change=${(event) => { this.printTemplate = event.target.value }}>
                             ${this._printTemplates.map((template, index) => html`<option value=${index}>${template.title}</option>`)}
                         </select>
                     </td>
                     <td>
-                        <select id="print-scale" class="btn-print-scales" .value=${this._printScale} @change=${(event) => { this.printScale = parseInt(event.target.value) }}>
+                        <select id="print-scale" class="btn-print-scales form-select" .value=${this._printScale} @change=${(event) => { this.printScale = parseInt(event.target.value) }}>
                             ${this._printScales.map( scale => html`<option .selected=${scale === this._printScale} value=${scale}>${scale.toLocaleString()}</option>`)}
                         </select>
                     </td>
@@ -157,7 +157,7 @@ export default class Print extends HTMLElement {
                 ${this.printDPIs.length > 1 ? keyed(this.defaultDPI, html`
                 <div class="print-dpi">
                     <span>${lizDict['print.toolbar.dpi']}</span>
-                    <select class="btn-print-dpis" .value=${this.defaultDPI} @change=${(event) => { this._printDPI = event.target.value }}>
+                    <select class="btn-print-dpis form-select" .value=${this.defaultDPI} @change=${(event) => { this._printDPI = event.target.value }}>
                         ${this.printDPIs.map( dpi => html`<option ?selected=${dpi === this.defaultDPI} value=${dpi}>${dpi}</option>`)}
                     </select>
                 </div>`) : ''}
@@ -184,7 +184,7 @@ export default class Print extends HTMLElement {
             </details>
             <div class="flex">
                 ${this.printFormats.length > 1 ? keyed(this.defaultFormat, html`
-                <select id="print-format" title="${lizDict['print.toolbar.format']}" class="btn-print-format" .value=${this.defaultFormat} @change=${(event) => { this._printFormat = event.target.value }}>
+                <select id="print-format" title="${lizDict['print.toolbar.format']}" class="btn-print-format form-select" .value=${this.defaultFormat} @change=${(event) => { this._printFormat = event.target.value }}>
                     ${this.printFormats.map( format => html`<option ?selected=${format === this.defaultFormat} value="${format}">${format.toUpperCase()}</option>`)}
                 </select>`) : ''}
                 <button id="print-launch" class="btn-print-launch btn btn-primary flex-grow-1" @click=${() => { this._launch() }}>${lizDict['print.launch']}</button>

assets/src/components/SelectionTool.js

@@ -33,7 +33,7 @@ export default class SelectionTool extends HTMLElement {
             <div class="menu-content">
                 <div>${lizDict['selectiontool.toolbar.layer']}</div>
                 <div>
-                    <select class="selectiontool-layer-list" @change=${ (event) => mainLizmap.selectionTool.allFeatureTypeSelected = event.target.value}>
+                    <select class="selectiontool-layer-list form-select" @change=${ (event) => mainLizmap.selectionTool.allFeatureTypeSelected = event.target.value}>
                         <optgroup label="${lizDict['selectiontool.toolbar.layers.single']}">
                             ${mainLizmap.selectionTool.layers.map((layer) => html`<option value="${layer.name}">${layer.title}</option>`)}
                         </optgroup>
@@ -52,7 +52,7 @@ export default class SelectionTool extends HTMLElement {
                     </label>
                 </div>
                 <div>
-                    <select class="selection-geom-operator" @change=${ (event) => mainLizmap.selectionTool.geomOperator = event.target.value} data-bs-toggle="tooltip" data-bs-title="${lizDict['selectiontool.toolbar.geomOperator']}">
+                    <select class="selection-geom-operator form-select" @change=${ (event) => mainLizmap.selectionTool.geomOperator = event.target.value} data-bs-toggle="tooltip" data-bs-title="${lizDict['selectiontool.toolbar.geomOperator']}">
                         <option value="intersects">${lizDict['selectiontool.toolbar.geomOperator.intersects']}</option>
                         <option value="within">${lizDict['selectiontool.toolbar.geomOperator.within']}</option>
                         <option value="overlaps">${lizDict['selectiontool.toolbar.geomOperator.overlaps']}</option>

assets/src/components/Tooltip.js

@@ -11,7 +11,7 @@ export default class Tooltip extends HTMLElement {
         this._tooltipLayersCfgs = mainLizmap.initialConfig.tooltipLayers.layerConfigs;
 
         this._template = () => html`
-            <select @change=${ event => { mainLizmap.tooltip.activate(event.target.value) }}>
+            <select class="form-select" @change=${ event => { mainLizmap.tooltip.activate(event.target.value) }}>
                 <option value="">---</option>
                 ${this._tooltipLayersCfgs.map(tooltipLayerCfg =>
                     html`<option ?selected=${this._tooltipLayersCfgs.length === 1} value="${tooltipLayerCfg.order}">${mainLizmap.state.layersAndGroupsCollection.getLayerByName(tooltipLayerCfg.name).title}</option>`

assets/src/legacy/atlas.js

@@ -263,7 +263,7 @@ import DOMPurify from 'dompurify';
 
                 // Add combobox with all data
                 home += '<p style="padding:0px 10px;">';
-                home += '<select id="liz-atlas-select">';
+                home += '<select id="liz-atlas-select" class="form-select">';
                 home += '<option value="-1"> --- </option>';
                 var pkey_field = lizAtlasConfig['primaryKey'];
                 for (var i in lizAtlasConfig['features_sorted']) {
@@ -306,7 +306,7 @@ import DOMPurify from 'dompurify';
                 // Multiple atlas
                 if (lizAtlasConfigArray.length > 1){
                     // Build select to choose between atlas layers
-                    atlasHTML = '<i class="icon-globe icon-white" style="margin-right: 4px;vertical-align: baseline;"></i><select id="select-atlas-layer">';
+                    atlasHTML = '<i class="icon-globe icon-white" style="margin-right: 4px;vertical-align: baseline;"></i><select id="select-atlas-layer" class="form-select">';
                     for (let i = 0; i < lizAtlasConfigArray.length; i++) {
                         atlasHTML += '<option value="' + lizAtlasConfigArray[i].layerId + '">' + lizMap.config.layers[lizAtlasConfigArray[i].layername]['title'] + '</option>';
                     }

assets/src/legacy/filter.js

@@ -28,7 +28,7 @@ var lizLayerFilterTool = function () {
 
                 html += '<div class="menu-content">';
                 // Add combo box to select the layer
-                html += '<select id="liz-filter-layer-selector">';
+                html += '<select id="liz-filter-layer-selector" class="form-select">';
                 var flayers = {};
                 for (var o in globalThis['filterConfig']) {
                     var conf = globalThis['filterConfig'][o];
@@ -504,7 +504,7 @@ var lizLayerFilterTool = function () {
                     html += getFormFieldHeader(field_item);
 
                     if (field_item.format == 'select') {
-                        html += '<select id="liz-filter-field-' + lizMap.cleanName(field_item.title) + '" class="liz-filter-field-select">';
+                        html += '<select id="liz-filter-field-' + lizMap.cleanName(field_item.title) + '" class="liz-filter-field-select form-select">';
                         html += '<option value=""> --- </option>';
                         html += '</select>';
                     }

assets/src/legacy/map.js

@@ -986,7 +986,7 @@ window.lizMap = function() {
 
 
                 // add filter values list
-                $('#locate-layer-'+layerName).parent().before('<div class="locate-layer"><select id="locate-layer-'+layerName+'-'+locate.filterFieldName+'">'+fOptions+'</select></div><br/>');
+                $('#locate-layer-'+layerName).parent().before('<div class="locate-layer"><select class="form-select" id="locate-layer-'+layerName+'-'+locate.filterFieldName+'">'+fOptions+'</select></div><br/>');
                 // listen to filter select changes
                 $('#locate-layer-'+layerName+'-'+locate.filterFieldName).change(function(){
                     var filterValue = $(this).children(':selected').val();
@@ -1141,7 +1141,7 @@ window.lizMap = function() {
             var lname = locateByLayerList[l];
             var lConfig = config.layers[lname];
             var html = '<div class="locate-layer">';
-            html += '<select id="locate-layer-' + cleanName(lname) + '" class="label">';
+            html += '<select id="locate-layer-' + cleanName(lname) + '" class="label form-select">';
             html += '<option>' + lConfig.title + '...</option>';
             html += '</select>';
             html += '</div>';

assets/src/legacy/switcher-layers-actions.js

@@ -142,7 +142,7 @@ var lizLayerActionButtons = function() {
                     html+= '        <dt>'+lizDict['layer.metadata.style.title']+'</dt>';
                     html+= '<dd>';
                     html+= '<input type="hidden" class="styleLayer '+isBaselayer+'" value="'+aName+'">';
-                    html+= '<select class="styleLayer '+isBaselayer+'">';
+                    html+= '<select class="styleLayer form-select '+isBaselayer+'">';
                     html+= options;
                     html+= '</select>';
                     html+= '</dd>';
@@ -184,7 +184,7 @@ var lizLayerActionButtons = function() {
                 if( options != '' && layerConfig.typename != undefined) {
                     html+= '        <dt>'+lizDict['layer.metadata.export.title']+'</dt>';
                     html+= '<dd>';
-                    html+= '<select class="exportLayer '+isBaselayer+'">';
+                    html+= '<select class="exportLayer form-select '+isBaselayer+'">';
                     html+= options;
                     html+= '</select>';
                     html+= '<button class="btn btn-sm exportLayer '+isBaselayer+'" title="'+lizDict['layer.metadata.export.title']+'" value="'+aName+'"><i class="icon-download"></i></button>';

lizmap/app/themes/default/jacl2db_admin/group_create.tpl

@@ -15,7 +15,7 @@
     </tr>
     <tr>
         <td><label for="rights-copy">{@acl2.group.copy.label@}</label></td>
-        <td><select id="rights-copy" name="rights-copy">
+        <td><select id="rights-copy" name="rights-copy" class="form-select">
             <option value=""></option>
             {foreach $groups as $group}
                 <option value="{$group->id_aclgrp}">{$group->name}</option>

lizmap/modules/action/templates/action_dock.tpl

@@ -19,7 +19,7 @@
 <template id="lizmap-action-item-list">
     <!-- div containing the select and the selected item description -->
     <div class="action-selector-container">
-        <select class="action-select">
+        <select class="action-select form-select">
             <option value="">-- {@action~action.dock.form.select.emptyItem.label@} -- </option>
         </select>
         <div class="action-description" data-default-value="{@action~action.dock.action.choose@}">

lizmap/modules/admin/templates/user_groups.tpl

@@ -26,7 +26,7 @@
 <form action="{formurl 'admin~acl:addgroup', array('user'=>$user)}" method="post">
     {formurlparam}
     <label for="user-add-group">{@admin~user.acl.form.add.to.group@}</label>
-    <select name="grpid" id="user-add-group">
+    <select name="grpid" id="user-add-group" class="form-select">
         {foreach $groups as $group}
             <option value="{$group->id_aclgrp}">{$group->name}</option>
         {/foreach}

lizmap/modules/view/templates/map_edition.tpl

@@ -6,7 +6,7 @@
         </p>
         <div id="edition-creation">
             <div>
-                <select id="edition-layer"></select>
+                <select id="edition-layer" class="form-select"></select>
             </div>
 
             <a id="edition-draw" class="btn btn-sm" href="#"
@@ -76,7 +76,7 @@
                                             id="edition-point-coord-crs-label">{@view~edition.point.coord.crs.label@}</label>
                                         <div class="controls">
                                             <select name="coord-crs" id="edition-point-coord-crs"
-                                                class="jforms-ctrl-menulist">
+                                                class="jforms-ctrl-menulist form-select">
                                                 <option value="4326" selected="selected"><span>EPSG:4326</span></option>
                                                 <option id="edition-point-coord-crs-layer" value="" style="display:none;">
                                                 </option>

lizmap/modules/view/templates/map_measure.tpl

@@ -1,7 +1,7 @@
 <div class="measure">
   <h3><span class="title"><button id="measure-stop" class="btn btn-stop btn-sm btn-error btn-link" title="{@view~map.toolbar.content.stop@}">×</button><span class="icon"></span>&nbsp;<span class="text">{@view~map.measure.toolbar.title@}</span></span></h3>
   <div class="menu-content">
-    <select id="measure-type">
+    <select id="measure-type" class="form-select">
       <option value="length">{@view~map.measure.toolbar.length@}</option>
       <option value="area">{@view~map.measure.toolbar.area@}</option>
       <option value="perimeter">{@view~map.measure.toolbar.perimeter@}</option>

lizmap/modules/view/templates/map_permalink.tpl

@@ -24,7 +24,7 @@
             </div>
             <div id="tab-embed-permalink" class="permalink-tab-pane-embed tab-pane" role="tabpanel">
                 <a href="{jfullurl 'view~embed:index', array('repository'=>$repository,'project'=>$project)}" target="_blank" id="permalink-embed" style="display:none;"></a>
-                <select id="select-embed-permalink" class="permalink-embed-select" style="width:auto;">
+                <select id="select-embed-permalink" class="permalink-embed-select form-select" style="width:auto;">
                     <option value="s">{@view~map.permalink.embed.size.small@}</option>
                     <option value="m">{@view~map.permalink.embed.size.medium@}</option>
                     <option value="l">{@view~map.permalink.embed.size.large@}</option>