profile-image-editor

// src/components/elements/profile-image-editor/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /elements/profile-image-editor
type: object
required:
  - avatar
additionalProperties: false
properties:
  accepted_formats:
    type: string
  avatar:
    description: elements/image
    format: html
    type: string
  input_name:
    type: string

// src/components/elements/profile-image-editor/mocks.yaml

avatar:
  $ref: elements/image#avatar
  $tpl: elements/image
  classes:
    - ProfileImageEditor-avatar
  alt: ''
input_name: profile-image

// src/components/elements/profile-image-editor/profile-image-editor.twig

{{ attach_library('finstral_global/element-profile-image-editor') }}

{% set input_id = "profile-image-editor-input-" ~ random() %}
{% set label_id = "profile-image-editor-label-" ~ random() %}

<profile-image-editor class="ProfileImageEditor">
	<div class="ProfileImageEditor-container" hidden>
		{{ avatar }}
		<button aria-labelledby="{{ label_id }}" class="ProfileImageEditor-button" type="button">
			{%- include "@elements/icon/icon.twig" with {
				classes: ["ProfileImageEditor-icon"],
				name: "edit"
			} only -%}
		</button>
	</div>

	<div class="ProfileImageEditor-fallback">
		{{ avatar }}
		<label class="visually-hidden" id="{{ label_id }}" for="{{ input_id }}">{{ "profile_image_editor.input_label"|t }}</label>
		<input accept="{{ accepted_formats|default('image/*') }}" id="{{ input_id }}" name="{{ input_name }}" type="file">
	</div>

</profile-image-editor>