by
Before replacing the deprecated pick list item with the calcite-list-item, the selection-appearance icon defaulted to a simple check. I think the calcite-list-item selection-appearance icon looks really bad, especially with my design. I would like to override it or not show it at all.
(BAD) calcite-list-item
(GOOD) calcite-pick-list-item
How do I change the icon to 'check' in JS or CSS?
1 Solution
Accepted Solutions
by
by
I probably could reach it with the code below, but I'm not exactly sure where in the action icon is the shadowRoot to change.
await customElements.whenDefined('calcite-list-item');
await delay(300);
let node = document.querySelector(`#some-list-here`);
if (node) {
let el = node.shadowRoot.querySelectorAll('calcite-list-item');
if (el) {
el.forEach((item) => {
I'm not sure where the icon is in the shadowRoot
// item.style.setProperty('icon', 'check');
});
}
}
From the website sample app.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="module" src=https://js.arcgis.com/calcite-components/1.0.7/calcite.esm.js></script>
<link rel="stylesheet" type="text/css" href=https://js.arcgis.com/calcite-components/1.0.7/calcite.css />
</head>
<body>
<calcite-list selection-mode="multiple">
<calcite-list-item label="Hiking trails" value="hiking-trails">
<calcite-action slot="actions-start" icon="layer" text="Trails layer"></calcite-action>
</calcite-list-item>
<calcite-list-item label="Waterfalls" value="waterfalls">
<calcite-action slot="actions-start" icon="layer" text="Waterfalls layer"></calcite-action>
</calcite-list-item>
<calcite-list-item label="Rivers" value="rivers">
<calcite-action slot="actions-start" icon="layer" text="Rivers layer"></calcite-action>
</calcite-list-item>
</calcite-list>
</body>
</html>
by
Hi. Thank you for helping me. You can see it in action here or try it at the URL below. Also, I added the code below. Basically, the pick list item uses a very acceptible check icon. I could change the calcite-list-item icon in Chrome devtools, but I cannot find where to override it in code. It sounds like I may need to just go back to using the pick list until calcite-list supports more icons.
https://www.manateepao.gov/parcel/?display=fullaerial&referer=search
/***
* Checkable list of tax parcel types to filter buffer results.
*/
function buildTaxParcelTypesComponent() {
return new Promise((resolve) => {
getTaxParcelTypes()
.then((result) => {
let block = document.createElement('calcite-block');
block.setAttribute('id', 'pao-taxparceltypes-block');
block.setAttribute('heading', 'Filter by tax parcel type');
block.setAttribute('collapsible', '');
block.setAttribute('hidden', '');
block.setAttribute('description', 'Click to open'); // default is closed
block.addEventListener('calciteBlockToggle', (event) => {
setBlockDescription(
event.target.id,
event.target?.open,
'Click to open'
);
});
let slot = document.createElement('calcite-icon');
slot.setAttribute('scale', 's');
slot.setAttribute('slot', 'icon');
slot.setAttribute('icon', 'filter');
block.appendChild(slot);
let list = document.createElement('calcite-list');
let taxparcelTypes = document.createElement('calcite-list');
taxparcelTypes.setAttribute('id', 'pao-taxparceltypes-list');
taxparcelTypes.setAttribute('selection-mode', 'multiple');
taxparcelTypes.setAttribute('selection-appearance', 'icon');
taxparcelTypes.setAttribute('scale', 's');
taxparcelTypes.setAttribute('heading-level', '1');
// Skip event if resetting.
taxparcelTypes.addEventListener('click', (event) => {
if (!bufferWasReset) handleTaxParcelTypesChange(event);
});
Object.keys(result.features).forEach((key) => {
let tp = result.features[key].attributes['TAXPARCELTYPE'];
let item = document.createElement('calcite-list-item');
item.setAttribute('overlay-positioning', 'absolute');
item.setAttribute('selected', '');
item.setAttribute('label', tp);
item.setAttribute('value', tp);
let action = document.createElement('calcite-action');
action.setAttribute(
'id',
`${tp.replace(/ /g, '-').toLowerCase() + '-action'}`
);
action.setAttribute('slot', 'actions-start');
action.setAttribute('appearance','transparent');
let span = document.createElement('span');
span.style.width = '16px';
span.innerHTML = ' '; // color will not render without hard space
action.appendChild(span);
item.appendChild(action);
taxparcelTypes.appendChild(item);
list.appendChild(taxparcelTypes);
});
// Default Tax Parcel Types
if (taxParcelTypesDefaultString === '') {
let taxParcelTypesArray = [];
let children = Array.from(list.children[0].children);
children.forEach((item) => {
taxParcelTypesArray.push(item.value);
});
// Use qualitative colors.
// fifo
let ramp = {
[0]: { rgb: '63,0,125' },
[1]: { rgb: '251,154,153' },
[2]: { rgb: '153,52,4' },
[3]: { rgb: '31,120,180' },
[4]: { rgb: '26,26,26' },
[5]: { rgb: '227,26,28' },
[6]: { rgb: '10,247,199' },
[7]: { rgb: '166,206,227' },
[8]: { rgb: '202,178,214' },
[9]: { rgb: '106,61,154' },
[10]: { rgb: '255,255,153' },
[11]: { rgb: '177,89,40' },
[12]: { rgb: '231,225,239' },
[13]: { rgb: '201,148,199' },
[14]: { rgb: '221,28,119' },
[15]: { rgb: '241,238,246' },
};
// Create array of tax type colors
if (taxParcelTypesArray?.length > 0) {
let s = taxParcelTypesArray.map((v) => `'${v}'`);
taxParcelTypesDefaultString = s.join(',');
taxParcelTypesSelectedString = taxParcelTypesDefaultString;
taxParcelTypeColors = taxParcelTypesArray.reduce(
(acc, cur, idx) => {
if (idx > Object.keys(ramp).length) idx--;
let obj = {};
obj[cur] = `rgba(${ramp[idx].rgb},0.4)`;
acc.push(obj);
return acc;
},
[]
);
}
// Assign style to tax parcel type list item.
children.forEach((item) => {
item.childNodes.forEach((ch) => {
if (ch.nodeName.toLowerCase() === 'calcite-action') {
let id = `${
item.value.replace(/ /g, '-').toLowerCase() + '-action'
}`;
if (ch.id === id) {
ch.childNodes.forEach((n) => {
if (n.nodeName === 'SPAN') {
let rgb = taxParcelTypeColors.filter((obj) => {
if (obj)
if (Object.keys(obj)[0] === item.value)
return obj[item.value];
});
if (rgb && rgb.length > 0)
n.style.backgroundColor = rgb[0][item.value];
n.style.borderRadius = '50%';
}
});
}
}
});
});
}
block.appendChild(list);
let panel = document.getElementById('pao-buffer-container');
if (panel) panel.appendChild(block);
resolve(true);
})
.catch((error) => {doLogException('buildTaxParcelTypesComponent->getTaxParcelTypes', error);});
});
} // end
/**
* Query ArcGIS for tax parcel types.
* @returns
*/
function getTaxParcelTypes() {
return new Promise((resolve) => {
let queryObject = new Query({
outSpatialReference: view.spatialReference,
returnGeometry: false,
returnIdsOnly: false,
returnCountOnly: false,
returnZ: false,
returnM: false,
returnDistinctValues: true,
returnExtentOnly: false,
orderByFields: ['TAXPARCELTYPE'],
outFields: ['TAXPARCELTYPE'],
where: '1=1', // where is required.
});
query
.executeQueryJSON(parcelSearchUrl, queryObject)
.then((result) => {
resolve(result);
})
['catch']((error) => {
doLogException('getTaxParcelTypes', error);
});
});
} // end
I am adding a custom action to get the color bullets.
by
