Hey I was trying to build custom editors which extend on top of built-in property editors in umbraco v15, but so far I failed to achieve it with few interesting issues:

import { html, customElement, property } from "@umbraco-cms/backoffice/external/lit";
// @ts-ignore
import {UmbPropertyEditorUiElement} from "@umbraco-cms/backoffice/dist-cms/packages/core/extension-registry";
import UmbPropertyEditorUINumberElement
  from "@umbraco-cms/backoffice/dist-cms/packages/property-editors/number/property-editor-ui-number.element";

/**
 * An example element.
 *
 * @slot - This element has a slot
 * @csspart button - The button
 */
@customElement('test-element')
export class Test extends UmbPropertyEditorUINumberElement implements UmbPropertyEditorUiElement{
  @property({ type: String })
  public value = "";

  render() {
    return html`I'm a property editor!  3 3`;
  }
}

so far I stuck on this, and there is no difference which editor I choose I am getting same result, and I am just wondering if I am doing something wrong or extending in this way doesnt work 🤔 I tried both v14 and v15 npm packages 🤷‍♂️ https://cdn.discordapp.com/attachments/1294711962235830464/1294711962520912005/image.png?ex=670c01fa&is=670ab07a&hm=a62d78a210295878fcbd0fddf2470c748c686bf63f80a5704c86b8d3f3a19a8d&

This isn't a public element:

ts
import UmbPropertyEditorUINumberElement
  from "@umbraco-cms/backoffice/dist-cms/packages/property-editors/number/property-editor-ui-number.element"

If you want to extend a built-in property editor ui, you can get it through the customElementsRegistry in the browser:

ts
const numberUi = customElements.get('umb-property-editor-ui-number');

export class Test extends numberUi implements UmbPropertyEditorUiElement {}

It's not the most elegant solution, but it should work perhaps with a few adjustments, as I'm not currently able to test it out. I would ask you to please put in an issue on the issue tracker to let us know the use-case and why you would extend the built-in property editor UIs - we might be able to export them directly 🙂

Why are they not public 🤦‍♂️, I have multiple cases where extending is best approach 😬, such as making content and URL with culture picker so I can have link to content published to other cultures, will try work around but still why is it private?!

They are registered in the browser through the custom elements registry and can be found there as public elements. We can potentially export them from the npm package to give more type safety, but they are not private as such

Yeah I meant I meaning of exports as there is a lot of in backofffice package things exported, imho all should be exported 🤷

Property editors, sure. I am not sure it makes sense to export all of the structural components, as you are just meant to use them in the browser

Oh yeah maybe, I meant all things which are probably used by users, i didnt had much experience with new backoffice yet ;p