slint/ui-libraries/material/ui/components/outline_icon_button.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { Elevation } from "./elevation.slint";
import { BaseButton } from "./base_button.slint";
import { Typography } from "../styling/typography.slint";
import { MaterialPalette } from "../styling/material_palette.slint";
import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint";

export component OutlineIconButton {
    in property <image> icon;
    in property <image> icon_checked: root.icon;
    in property <bool> checkable;
    in_out property <bool> checked;
    in property <string> tooltip <=> base.tooltip;
    in property <bool> enabled <=> base.enabled;

    callback clicked();

    accessible-role: button;
    accessible-enabled: true;
    accessible-label: root.tooltip;
    accessible-checkable: root.checkable;
    accessible-checked: root.checked;
    accessible-action-default => { base.clicked(); }

    background_layer := Rectangle {
        width: 100%;
        height: 100%;
        border_radius: base.border_radius;
        border_width: 1px;
        border_color: MaterialPalette.outline;
    }

    base := BaseButton {
        icon: root.checked ? root.icon_checked : root.icon;
        border_radius: self.height / 2;
        color: !root.enabled ? MaterialPalette.on_surface_variant : MaterialPalette.on_surface_variant;
        horizontal_padding: 0;
        vertical_padding: 0;
        width: self.height;
        icon_size: MaterialStyleMetrics.icon_size_24;
        display_background: false;

        clicked => {
            root.toggle();
            root.clicked();
        }
    }

    function toggle() {
        if !root.checkable {
            return;
        }

        root.checked = !root.checked;
    }

    states [
        disabled when !root.enabled : {
            base.color: MaterialPalette.on_surface;
            base.transparent_background: true;
            background_layer.border_color: root.checked ? transparent :  MaterialPalette.on_surface;
            background_layer.background: root.checked ? MaterialPalette.on_surface : transparent;
            background_layer.opacity: MaterialPalette.state_layer_opacity_hover;
        }
        checked when root.enabled && root.checked : {
            base.color: MaterialPalette.inverse_on_surface;
            background_layer.background: MaterialPalette.inverse_surface;
            background_layer.border_width: 0;
        }
        checked_disabled when root.enabled && root.checked : {
            base.color: MaterialPalette.inverse_on_surface;
            background_layer.background: MaterialPalette.inverse_on_surface;
            background_layer.border_width: 0;
        }
    ]
}