@project161/yang-furigana/fesm2015/project161-yang-furigana.js

An easy way to use <ruby> tags in Angular

import { Directive, ElementRef, Renderer2, Input, NgModule } from '@angular/core';

const SPAN = 'span';
class YangFuriganaDirective {
    constructor(el, renderer) {
        this.el = el;
        this.renderer = renderer;
    }
    ngAfterViewInit() {
        if (!this.isValidElement()) {
            console.warn('Warning: yangFurigana works only on <span> elements without children.');
            return;
        }
        const html = this.generateRubyTag();
        this.renderer.setProperty(this.el.nativeElement, 'innerHTML', html);
    }
    /**
     * Check if the element passed as argument is a <span> element and has no child tags
     * @param el the Element to evaluate
     */
    isValidElement() {
        return (this.el.nativeElement.nodeName.toLowerCase() === SPAN &&
            this.el.nativeElement.childElementCount === 0);
    }
    /**
     * Generate the template to be added to the HTML as result
     */
    generateRubyTag() {
        let styleCode = '';
        if (!!this.yangFuriganaClass) {
            const encapsulationAttribute = this.el.nativeElement.attributes[0];
            styleCode = ` ${encapsulationAttribute.name} class="${this.yangFuriganaClass}"`;
        }
        if (!!this.yangFuriganaStyle) {
            styleCode += ` style="${this.yangFuriganaStyle}"`;
        }
        const furiganaHTML = `<rp>(</rp><rt${styleCode}>${this.yangFurigana}</rt><rp>)</rp>`;
        return `<ruby>${this.el.nativeElement.innerHTML}${furiganaHTML}</ruby>`;
    }
}
YangFuriganaDirective.decorators = [
    { type: Directive, args: [{
                selector: '[yangFurigana]'
            },] }
];
YangFuriganaDirective.ctorParameters = () => [
    { type: ElementRef },
    { type: Renderer2 }
];
YangFuriganaDirective.propDecorators = {
    yangFurigana: [{ type: Input }],
    yangFuriganaClass: [{ type: Input }],
    yangFuriganaStyle: [{ type: Input }]
};

class YangFuriganaModule {
}
YangFuriganaModule.decorators = [
    { type: NgModule, args: [{
                declarations: [YangFuriganaDirective],
                imports: [],
                exports: [YangFuriganaDirective]
            },] }
];

/*
 * Public API Surface of ng-furigana
 */

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

export { YangFuriganaDirective, YangFuriganaModule };
//# sourceMappingURL=project161-yang-furigana.js.map