@ng-blue-duct-tape/svg-draw-stroke/bundles/ng-blue-duct-tape-svg-draw-stroke.umd.js

Angular library that allows you to access elements inside SVG for further animation

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core')) :
    typeof define === 'function' && define.amd ? define('@ng-blue-duct-tape/svg-draw-stroke', ['exports', '@angular/common', '@angular/core'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-blue-duct-tape'] = global['ng-blue-duct-tape'] || {}, global['ng-blue-duct-tape']['svg-draw-stroke'] = {}), global.ng.common, global.ng.core));
}(this, (function (exports, common, i0) { 'use strict';

    function _interopNamespace(e) {
        if (e && e.__esModule) return e;
        var n = Object.create(null);
        if (e) {
            Object.keys(e).forEach(function (k) {
                if (k !== 'default') {
                    var d = Object.getOwnPropertyDescriptor(e, k);
                    Object.defineProperty(n, k, d.get ? d : {
                        enumerable: true,
                        get: function () {
                            return e[k];
                        }
                    });
                }
            });
        }
        n['default'] = e;
        return Object.freeze(n);
    }

    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);

    var SvgDrawStrokeDirective = /** @class */ (function () {
        function SvgDrawStrokeDirective(_element, _renderer) {
            this._element = _element;
            this._renderer = _renderer;
            this.manualInit = false;
            this.strokeLinecap = 'round';
            this.strokeLinecapAll = false;
            this._isSvgElement = false;
            this._isInit = false;
            this.stokeElements = [];
        }
        SvgDrawStrokeDirective.prototype.ngAfterViewInit = function () {
            if (!this.manualInit) {
                this.init();
            }
        };
        SvgDrawStrokeDirective.prototype.init = function () {
            if (this._isInit) {
                console.warn("bdtSvgDrawStroke already initialized!");
                return;
            }
            this._checkElementType();
            if (this._isSvgElement) {
                this._setNativeElement();
                this._getStrokeNodes(this._element.nativeElement.childNodes);
                this._isInit = true;
            }
        };
        SvgDrawStrokeDirective.prototype._checkElementType = function () {
            if (this._element.nativeElement instanceof SVGElement) {
                this._isSvgElement = true;
            }
            else {
                console.error("Element type is not SVGElement", {
                    element: this._element.nativeElement,
                });
            }
        };
        SvgDrawStrokeDirective.prototype._getStrokeNodes = function (nodes) {
            var _this = this;
            if (nodes.length) {
                nodes.forEach(function (node) {
                    if (node.childNodes.length) {
                        _this._getStrokeNodes(node.childNodes);
                    }
                    if (node instanceof SVGGeometryElement) {
                        if (node.getAttribute('stroke-width')) {
                            if (_this.strokeLinecapAll && _this.strokeLinecap) {
                                _this._setStrokeLinecap(node);
                            }
                            else if (!node.getAttribute('stroke-linecap') &&
                                _this.strokeLinecap) {
                                _this._setStrokeLinecap(node);
                            }
                            var strokeTotal = Math.ceil(node.getTotalLength()) + 1;
                            _this.stokeElements.push({
                                element: node,
                                strokeTotal: strokeTotal,
                            });
                            _this._setStrokeDasharray(node, strokeTotal);
                        }
                        else {
                            console.warn("SVGGeometryElement has no attribute stroke-width", {
                                element: node,
                            });
                        }
                    }
                });
            }
            else {
                console.warn("SVGElement has no childes", {
                    element: this._element.nativeElement,
                });
            }
        };
        SvgDrawStrokeDirective.prototype._setNativeElement = function () {
            this.nativeElement = this._element.nativeElement;
        };
        SvgDrawStrokeDirective.prototype._setStrokeDasharray = function (node, strokeTotal) {
            this._renderer.setStyle(node, 'stroke-dasharray', strokeTotal);
        };
        SvgDrawStrokeDirective.prototype._setStrokeLinecap = function (node) {
            this._renderer.setStyle(node, 'stroke-linecap', this.strokeLinecap);
        };
        return SvgDrawStrokeDirective;
    }());
    SvgDrawStrokeDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: SvgDrawStrokeDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
    SvgDrawStrokeDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.4", type: SvgDrawStrokeDirective, selector: "[bdtSvgDrawStroke]", inputs: { manualInit: "manualInit", strokeLinecap: "strokeLinecap", strokeLinecapAll: "strokeLinecapAll" }, ngImport: i0__namespace });
    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: SvgDrawStrokeDirective, decorators: [{
                type: i0.Directive,
                args: [{
                        selector: '[bdtSvgDrawStroke]',
                    }]
            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { manualInit: [{
                    type: i0.Input
                }], strokeLinecap: [{
                    type: i0.Input
                }], strokeLinecapAll: [{
                    type: i0.Input
                }] } });

    var SvgDrawStrokeModule = /** @class */ (function () {
        function SvgDrawStrokeModule() {
        }
        return SvgDrawStrokeModule;
    }());
    SvgDrawStrokeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: SvgDrawStrokeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
    SvgDrawStrokeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: SvgDrawStrokeModule, declarations: [SvgDrawStrokeDirective], imports: [common.CommonModule], exports: [SvgDrawStrokeDirective] });
    SvgDrawStrokeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: SvgDrawStrokeModule, imports: [[common.CommonModule]] });
    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: SvgDrawStrokeModule, decorators: [{
                type: i0.NgModule,
                args: [{
                        imports: [common.CommonModule],
                        declarations: [SvgDrawStrokeDirective],
                        exports: [SvgDrawStrokeDirective],
                    }]
            }] });

    /**
     * Generated bundle index. Do not edit.
     */

    exports.SvgDrawStrokeDirective = SvgDrawStrokeDirective;
    exports.SvgDrawStrokeModule = SvgDrawStrokeModule;

    Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=ng-blue-duct-tape-svg-draw-stroke.umd.js.map