import { r as registerInstance, c as createEvent, h, H as Host } from './index-BIRwgFLv.js';
import { VerdocsEndpoint, toggleTemplateStar } from '@verdocs/js-sdk';

const verdocsTemplateStarCss = "verdocs-template-star{display:-ms-flexbox;display:flex;-ms-flex:0 0 60px;flex:0 0 60px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-template-star .star{line-height:10px}verdocs-template-star .star.updating{-webkit-animation:spinningStar 2s infinite linear;animation:spinningStar 2s infinite linear}verdocs-template-star .star svg{width:24px;height:24px}verdocs-template-star .count{color:#595c5d;font-size:14px;margin-left:10px}@-webkit-keyframes spinningStar{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinningStar{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}";

const OutlineStarIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" /></svg>`;
const SolidStarIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" /></svg>`;
const VerdocsTemplateStar = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.starChange = createEvent(this, "starChange");
        this.sdkError = createEvent(this, "sdkError");
        /**
         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
         */
        this.endpoint = VerdocsEndpoint.getDefault();
        this.updating = false;
    }
    async componentWillLoad() {
        this.endpoint.loadSession();
        if (!this.endpoint.session) {
            console.log('[TEMPLATES] Must be authenticated');
            return;
        }
    }
    toggle(e) {
        e.stopPropagation();
        this.updating = true;
        toggleTemplateStar(VerdocsEndpoint.getDefault(), this.template.id)
            .then(r => {
            this.updating = false;
            this.template.star_counter = r.star_counter;
            this.starChange.emit({
                templateId: this.template.id,
                starred: r.star_counter > 0,
                count: r.star_counter,
            });
        })
            .catch(e => {
            this.updating = false;
            console.log('[STAR] Error toggling template star', e.message);
            this.sdkError.emit(e);
        });
    }
    render() {
        return (h(Host, { key: 'c60505c6215779f063eaa7896dc2c0278d78e877' }, h("div", { key: 'cd1c9b41b3ac03fe72333d4244729f55b42ef33d', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: '0e7ecdeb2646424f052152b7c7bb16543ff260d3', class: "count" }, this.template.star_counter || '--')));
    }
};
VerdocsTemplateStar.style = verdocsTemplateStarCss;

export { VerdocsTemplateStar as verdocs_template_star };
//# sourceMappingURL=verdocs-template-star.entry.js.map
