[
    {
        "url": "https://dansani.kontainer.com/cdn/5FPG1rz/GaqfKzSvrtHW/vcali-10d-shape120-25.webp",
        "urlBaseName": "https://dansani.kontainer.com/cdn/5FPG1rz/GaqfKzSvrtHW/vcali-10d-shape120-25",
        "thumbnailUrl": "https://dansani.kontainer.com/cdn/5FPG1rz/GaqfKzSvrtHW/vcali-10d-shape120-25.webp",
        "type": "image",
        "extension": "webp",
        "description": null,
        "alt": null,
        "fileId": 15245169,
        "fileName": "vcali_10d_shape120_25.tif",
        "folderId": 527324,
        "token": null,
        "external": null,
        "cf": {
            "Article number": "631112403\nC09-1099\nBI1\nBI2\nS939-099\nPO2SK\nC75-0099\n\nBreezy Blue\nNCS S 3010-B10G",
            "Variants": "631112403\nBI1\nBI2\nC09-1099\nC75-0099\nPO2SK\nS939-099",
            "File category": "Images room sets",
            "Series": "Dansani Calidris",
            "Alt tags DK": "Stort og lækkert badeværelse med badeværelsesmøbler i lyse, blå farver og holdt i nordisk stil",
            "Alt tags NO": "Stort og lekkert bad med baderomsmøbler i lyse, blå farger og holdt i nordisk stil",
            "Alt tags SE": "Stort och läckert badrum med badrumsmöbler i ljusa, blåa färger i nordisk stil",
            "Alt tags FI": "Suuri ja herkullinen kylpyhuone, jossa kylpyhuonekalusteet vaaleissa, sinisissä väreissä ja pohjoismaiseen tyyliin",
            "Alt tags UK": "Lovely large bathroom with furniture in light, blue colors oozing with Nordic style",
            "Alt tags DE": "Großes und stilvolles Badezimmer mit Badezimmermöbeln in hellblauen Farben und nordischem Stil",
            "Alt tags NL": "Grote moderne badkamer met badkamermeubel in lichte, blauwe kleuren in een Scandinavische stijl"
        },
        "downloadTemplateId": 7675,
        "originalWidth": 3000,
        "originalHeight": 3900,
        "originalSize": 70227052
    }
]

{
    "javascript": [
        "~/App_Plugins/KontainerExtension/interceptor.js",
    ]
}

angular.module('umbraco.services').config([
    '$httpProvider',
    function ($httpProvider) {
        $httpProvider.interceptors.push(function () {
            return {
                'request': function (request) {
                    // Redirect any requests to the kontainer media picker to our own view
                    if (request.url.indexOf("/App_Plugins/Kontainer/editors/mediapicker.html") === 0) {
                        request.url = '/App_Plugins/KontainerExtension/mediapicker.html';
                    }
                    return request;
                }
            };
        });
    }]);

<div class="umb-sortable-thumbnails__actions" data-element="sortable-thumbnail-actions">
    <!-- @@CUSTOM BUTTON EXTENSION-->
    <button type="button" aria-label="Edit products" class="umb-sortable-thumbnails__action btn-reset"
            data-element="action-products" ng-click="vm.products(item, $index)">
        <i class="icon icon-box-alt" aria-hidden="true"></i>
    </button>
    <!-- @@CUSTOM BUTTON EXTENSION-->
    <button type="button" aria-label="Edit media" class="umb-sortable-thumbnails__action btn-reset"
            data-element="action-edit" ng-click="ctrl.edit(item)">
        <i class="icon icon-edit" aria-hidden="true"></i>
    </button>
    <button type="button" aria-label="Remove" class="umb-sortable-thumbnails__action -red btn-reset"
            data-element="action-remove" ng-click="ctrl.remove(item)">
        <i class="icon icon-delete" aria-hidden="true"></i>
    </button>
</div>        

ng-click="vm.products(item, $index)"

{
    "javascript": [
        "~/App_Plugins/KontainerExtension/interceptor.js",
        "~/App_Plugins/KontainerExtension/kontainerExtension.controller.js",
        "~/App_Plugins/KontainerExtension/infiniteEditor.controller.js",
    ]
}

(function () {
    "use strict";
    function KontainerController($scope, $controller, angularHelper, editorService) {
        var ctrl = $controller('mediapickerController as ctrl', {$scope: $scope, angularHelper: angularHelper})
        angular.extend(this, ctrl);

        var vm = this;        
        vm.products = products;

        function products(item, $index){
            var options = {
                title: "Select products",
                view: "/App_Plugins/KontainerExtension/infiniteEditor.html",
                size: "medium",
                item: item,
                itemIndex: $index,
                selection: $scope.model.value[$index].selection,
                submit: function(model, index) {                    
                    $scope.model.value[index].selection = model;
                    editorService.close();
                    vm.buttonState = "init";
                },
                close: function() {
                    editorService.close();
                    vm.buttonState = "init";
                }
            };
            editorService.open(options);
        }
    }    

    angular.module('umbraco').controller('KontainerController', [
        '$scope',
        '$controller',
        'angularHelper',
        'editorService',
        KontainerController]);
})();

var ctrl = $controller('mediapickerController as ctrl', {$scope: $scope, angularHelper: angularHelper})
angular.extend(this, ctrl);

"selection": {
    "showProducts": true,
    "productChoices": [
        {
            "name": "631112403",
            "checked": false
        },
        {
            "name": "BI1",
            "checked": true
        },
        {
            "name": "BI2",
            "checked": true
        },
        {
            "name": "C09-1099",
            "checked": true
        },
        {
            "name": "C75-0099",
            "checked": false
        },
        {
            "name": "PO2SK",
            "checked": false
        },
        {
            "name": "S939-099",
            "checked": false
        }
    ]
}

public class Composer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.PropertyValueConverters().Remove<Kontainer.ValueConverters.MediaPickerValueConverter>();
    }
}

public class KontainerOverwriteValueConverter : IPropertyValueConverter
{
    private readonly IVariationContextAccessor _variationContextAccessor;
    private readonly KontainerMapper _kontainerMapper;

    public KontainerOverwriteValueConverter(IVariationContextAccessor variationContextAccessor, KontainerMapper kontainerMapper)
    {
        _variationContextAccessor = variationContextAccessor;
        _kontainerMapper = kontainerMapper;
    }

    public bool IsConverter(IPublishedPropertyType propertyType)
    {
        return propertyType.EditorAlias.Equals("Kontainer.MediaPicker");
    }

    // Taken directly from Umbraco core - https://github.com/umbraco/Umbraco-CMS/blob/cb544f15eee862361c7830640ac0d0c4252bf488/src/Umbraco.Core/PropertyEditors/PropertyValueConverterBase.cs#L9
    public bool? IsValue(object? value, PropertyValueLevel level)
    {
        switch (level)
        {
            case PropertyValueLevel.Source:
                // the default implementation uses the old magic null & string comparisons,
                // other implementations may be more clever, and/or test the final converted object values
                return value != null && (value is not string stringValue || !string.IsNullOrWhiteSpace(stringValue));
            case PropertyValueLevel.Inter:
                return null;
            case PropertyValueLevel.Object:
                return null;
            default:
                throw new NotSupportedException($"Invalid level: {level}.");
        }
    }

    public Type GetPropertyValueType(IPublishedPropertyType propertyType)
    {
        var isMultiple = IsMultipleDataType(propertyType.DataType);
        return isMultiple
            ? typeof(List<KontainerData>)
            : typeof(KontainerData);
    }

    private bool IsMultipleDataType(PublishedDataType dataType)
    {
        if (dataType.Configuration is not Dictionary<string, object> config)
        {
            return true;
        }

        if(!config.TryGetValue("multiSelect", out var val))
        {
            return true;
        }

        return val.ToString() != "0";
    }

    public PropertyCacheLevel GetPropertyCacheLevel(IPublishedPropertyType propertyType)
    {
        return PropertyCacheLevel.Elements;
    }

    public object? ConvertSourceToIntermediate(IPublishedElement owner, IPublishedPropertyType propertyType, object? source,
        bool preview)
    {
        var culture = string.IsNullOrWhiteSpace(_variationContextAccessor.VariationContext?.Culture) ? "da-DK" : _variationContextAccessor.VariationContext.Culture;
        var isMultiple = IsMultipleDataType(propertyType.DataType);

        var files = new List<KontainerData>();

        if (source == null)
        {
            return isMultiple ? files : null;
        }

        var sourceString = source.ToString();
        if (sourceString is null)
        {
            return isMultiple ? files : null;
        }

        if (!string.IsNullOrWhiteSpace(sourceString))
        {
            var kontainerMedia = JsonSerializer.Deserialize<List<KontainerDataJsonModel>>(sourceString);
            if (kontainerMedia is not null)
            {
                files.AddRange(_kontainerMapper.MapKontainerData(kontainerMedia, culture).GetAwaiter().GetResult());
            }
        }

        return isMultiple ? files : files.FirstOrDefault();
    }

    public object? ConvertIntermediateToObject(IPublishedElement owner, IPublishedPropertyType propertyType,
        PropertyCacheLevel referenceCacheLevel, object? inter, bool preview)
    {
        return inter;
    }

    public object? ConvertIntermediateToXPath(IPublishedElement owner, IPublishedPropertyType propertyType,
        PropertyCacheLevel referenceCacheLevel, object? inter, bool preview)
    {
        return null;
    }
}

<ec-kontainer media="@article.Image" container-class="overflow-hidden" img-class="w-full object-cover sm:h-120 xl:h-155 max-sm:w-full"></ec-kontainer>