loviuz/openstamanager
loviuz/openstamanager
1
0
Fork 0
mirror of https://github.com/devcode-it/openstamanager.git synced 2025-02-24 07:17:55 +01:00
Code Issues Releases Activity

fix(textfield): Gestione dell'aggiunta/rimozione di un'icona

Browse Source
This commit is contained in:
Maicol Battistini 2021-11-30 10:54:36 +01:00
parent 2e411b5576
commit f1f136ab73
No known key found for this signature in database
GPG Key ID: 4FDB0F87CDB1D34A
2 changed files with 40 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.idea/inspectionProfiles/Project_Default.xml generated
View File

@ -99,7 +99,7 @@
<inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myValues">
<value>
<list size="24">
<list size="25">
<item index="0" class="java.lang.String" itemvalue="nobr" />
<item index="1" class="java.lang.String" itemvalue="noembed" />
<item index="2" class="java.lang.String" itemvalue="comment" />
@ -124,6 +124,7 @@
<item index="21" class="java.lang.String" itemvalue="mwc-checkbox" />
<item index="22" class="java.lang.String" itemvalue="mwc-linear-progress" />
<item index="23" class="java.lang.String" itemvalue="mwc-icon-button-toggle" />
<item index="24" class="java.lang.String" itemvalue="slot" />
</list>
</value>
</option>

60
resources/js/WebComponents/TextField.js vendored
View File

@ -1,6 +1,5 @@
import {TextField as MWCTextField} from '@material/mwc-textfield';
import {waitUntil} from 'async-wait-until';
import classnames from 'classnames';
import {
html,
type TemplateResult
@ -10,15 +9,52 @@ import {
export default class TextField extends MWCTextField {
async connectedCallback() {
super.connectedCallback();
// Wait until slots are added to DOM
await waitUntil(() => this.shadowRoot.querySelectorAll('slot[name^=icon]').length > 0);
const slots = this.shadowRoot.querySelectorAll('slot[name^=icon]');
for (const slot: HTMLSlotElement of slots) {
const slotClass = `mdc-text-field__icon--${slot.name === 'icon' ? 'leading' : 'trailing'}`;
const rootClass = `mdc-text-field--with-${slot.name === 'icon' ? 'leading' : 'trailing'}-icon`;
const slotParent = slot.parentElement;
const rootElement = this.shadowRoot.firstElementChild;
// Check if slot has content
if (slot.assignedNodes().length > 0) {
this[slot.name] = ' ';
slotParent.classList.add(slotClass);
rootElement.classList.add(rootClass);
}
// Listen for changes in slot (added/removed)
slot.addEventListener('slotchange', () => {
if (slot.assignedNodes().length > 0) {
slotParent.classList.add(slotClass);
rootElement.classList.add(rootClass);
} else {
slotParent.classList.remove(slotClass);
rootElement.classList.remove(rootClass);
}
});
}
}
renderLeadingIcon() {
return this.renderIcon();
}
renderTrailingIcon() {
return this.renderIcon(true);
}
renderIcon(isTrailingIcon: boolean = false): TemplateResult {
return html`
<span class="mdc-text-field__icon">
<slot name="icon${isTrailingIcon ? 'Trailing' : ''}"></slot>
</span>
`;
}
get nativeValidationMessage() {
return this.formElement.validationMessage;
}
@ -46,26 +82,6 @@ export default class TextField extends MWCTextField {
}
return isValid;
}
renderLeadingIcon() {
return this.renderIcon();
}
renderTrailingIcon() {
return this.renderIcon(true);
}
renderIcon(isTrailingIcon: boolean = false): TemplateResult {
const classes = {
'mdc-text-field__icon--leading': !isTrailingIcon,
'mdc-text-field__icon--trailing': isTrailingIcon
};
return html`
<span class="mdc-text-field__icon ${classnames(classes)}">
<slot name="icon${isTrailingIcon ? 'Trailing' : ''}"></slot>
</span>`;
}
}
window.customElements.define('text-field', TextField);