@ngodings/ngx-image-tagger
Version:
Simple Image Tagger like instagram, easy to put stuff/item information in x/y position from image, easy configuration in Angular
259 lines (253 loc) • 28.8 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
import { fromEvent } from 'rxjs';
import * as i1 from '@angular/common';
import { CommonModule, CurrencyPipe } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i3 from '@ngodings/ngx-currency';
import { NgxCurrencyModule } from '@ngodings/ngx-currency';
class NgxImageTaggerComponent {
constructor() {
this.heightElement = 0;
this.widthElement = 0;
this.isAllowCreate = false;
this.isShowThumbnail = true;
this.imageClassList = "";
this.placeholderName = 'Name';
this.placeholderPrice = 'Price';
this.isShowPrice = true;
this.placeholderLink = 'Link';
this.isShowLink = true;
this.borderColor = "#007ac1";
this.backgroundColor = "#03a9f4";
this.textColor = "#ffffff";
this.inputClassList = "";
this.placeholderCreateTitle = 'Tag your product!';
this.buttonCancelTitle = "Cancel";
this.buttonCreateTitle = "Create";
this.isShowShop = false;
this.titleShop = "Go to shop";
this.onShowTagMode = "Hover";
this.tagger = {
idParent: 'image-parent',
id: 'image',
style: '',
urlShop: '',
isOffsideX: false,
isOffsideY: false,
x: 0,
y: 0,
url: '',
tags: []
};
this.taggerChange = new EventEmitter();
this.isShowForm = false;
this.isShowView = true;
fromEvent(document.body, 'mousedown').subscribe((event) => {
var _a, _b;
const elementId = event.target.id;
if (this.tagger && elementId === this.tagger.id) {
this.resetTag();
const x = event.layerX;
const y = event.layerY - 6;
this.heightElement = (_a = event === null || event === void 0 ? void 0 : event.srcElement) === null || _a === void 0 ? void 0 : _a.offsetHeight;
const halfY = this.heightElement / 2;
if (halfY < y) {
this.tagger.isOffsideY = true;
}
else {
this.tagger.isOffsideY = false;
}
this.widthElement = (_b = event === null || event === void 0 ? void 0 : event.srcElement) === null || _b === void 0 ? void 0 : _b.offsetWidth;
const halfX = this.widthElement / 2;
if (halfX < x) {
this.tagger.isOffsideX = true;
}
else {
this.tagger.isOffsideX = false;
}
this.tagger.x = (x * 100) / this.widthElement;
this.tagger.y = (y * 100) / this.heightElement;
this.isShowForm = true;
}
});
}
ngOnInit() {
this.form = {
id: '',
x: 0,
y: 0,
isOffsideX: false,
isOffsideY: false,
tagger: this.tagger,
open: false,
};
if (this.onShowTagMode === 'IconClick') {
this.isShowView = false;
}
}
changeStyleClick(id, tag) {
if (this.onShowTagMode != 'Click') {
return;
}
tag.open = !tag.open;
this.onShowStyle(id, tag.open);
}
changeStyleHover(id, show) {
if (this.onShowTagMode == 'Click') {
return;
}
this.onShowStyle(id, show);
}
onShowStyle(id, show) {
const el = document.getElementById(id);
if (el) {
if (show) {
el.style.display = "block";
el.style.zIndex = "100";
}
else {
el.style.display = "none";
el.style.zIndex = "1";
}
}
}
goToURL(url) {
window.open(url, "_blank");
}
goToTag(item) {
window.open(item.url, "_blank");
}
resetTag() {
this.form.name = '';
this.form.price = 0;
this.form.url = '';
this.isShowForm = false;
}
submitTag(item) {
if (item) {
let isOffsideX = false;
let isOffsideY = false;
if ((item === null || item === void 0 ? void 0 : item.x) > 50) {
isOffsideX = true;
}
else {
isOffsideX = false;
}
if ((item === null || item === void 0 ? void 0 : item.y) > 0) {
isOffsideY = true;
}
else {
isOffsideY = false;
}
item.tags.push({
id: "", name: this.form.name, url: this.form.url, x: item.x, y: item.y, isOffsideX, isOffsideY,
open: false,
price: this.form.price,
tagger: Object.assign(this.tagger),
});
this.resetTag();
this.taggerChange.next(this.tagger);
}
}
editTag(item, tag, subindex) {
this.form.name = tag === null || tag === void 0 ? void 0 : tag.name;
this.form.url = tag === null || tag === void 0 ? void 0 : tag.url;
this.tagger.x = tag.x;
this.tagger.y = tag.y;
this.tagger.isOffsideX = tag.isOffsideX;
this.tagger.isOffsideY = tag.isOffsideY;
this.isShowForm = true;
this.taggerChange.next(this.tagger);
}
deleteTag(item, tag, subindex) {
this.tagger.tags.splice(subindex, 1);
this.taggerChange.next(this.tagger);
}
}
NgxImageTaggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxImageTaggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxImageTaggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NgxImageTaggerComponent, selector: "ngx-image-tagger", inputs: { isAllowCreate: "isAllowCreate", isShowThumbnail: "isShowThumbnail", imageClassList: "imageClassList", placeholderName: "placeholderName", placeholderPrice: "placeholderPrice", isShowPrice: "isShowPrice", placeholderLink: "placeholderLink", isShowLink: "isShowLink", borderColor: "borderColor", backgroundColor: "backgroundColor", textColor: "textColor", inputClassList: "inputClassList", placeholderCreateTitle: "placeholderCreateTitle", buttonCancelTitle: "buttonCancelTitle", buttonCreateTitle: "buttonCreateTitle", isShowShop: "isShowShop", titleShop: "titleShop", onShowTagMode: "onShowTagMode", tagger: "tagger" }, outputs: { taggerChange: "taggerChange" }, ngImport: i0, template: "<div class=\"tagger\" id=\"{{ tagger.idParent }}\">\n <img alt=\"Image Tagger\" id=\"{{ tagger.id }}\" [src]=\"tagger.url\" [ngClass]=\"imageClassList\"> \n <ng-container *ngIf=\"tagger?.tags && tagger.tags?.length! > 0 && onShowTagMode === 'IconClick'\">\n <div class=\"shop-icon\" [class.active]=\"isShowView\" (click)=\"isShowView = !isShowView\" [class.without-shop]=\"!isShowShop\" [class.with-shop]=\"isShowShop\">\n <i class=\"material-icons\">local_mall</i>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"isShowForm\">\n <div class=\"add-tag flex\" *ngIf=\"isAllowCreate\" [ngStyle]=\"{\n 'top.%': tagger.y , \n 'left.%': tagger.x\n }\" [class.items-start]=\"tagger.isOffsideY && !tagger.isOffsideX || tagger.isOffsideY && tagger.isOffsideX\">\n\n <div class=\"pin mr-2\"></div>\n\n <div class=\"content\">\n <ng-container *ngIf=\"placeholderCreateTitle\">\n <div class=\"mb-3 create-title\">\n {{ placeholderCreateTitle }}\n </div>\n </ng-container>\n <div>\n <input class=\"input-style\" [(ngModel)]=\"form.name\" [placeholder]=\"placeholderName\" type=\"text\" [ngClass]=\"inputClassList\">\n </div>\n <ng-container *ngIf=\"isShowPrice\">\n <div class=\"mt-2\">\n <input class=\"input-style\" [(ngModel)]=\"form.price\" currencyMask [options]=\"{ prefix: '$ ', thousands: '.', decimal: ',' }\" [placeholder]=\"placeholderPrice\" [ngClass]=\"inputClassList\">\n </div>\n </ng-container>\n <ng-container *ngIf=\"isShowLink\">\n <div class=\"mt-2\">\n <input class=\"input-style\" [(ngModel)]=\"form.url\" [placeholder]=\"placeholderLink\" type=\"email\" [ngClass]=\"inputClassList\">\n </div>\n </ng-container>\n <div class=\"mt-2 flex items-center justify-space-between gap-2\">\n <div class=\"w-half\">\n <button class=\"button-style outline\" (click)=\"isShowForm = false\" [ngStyle]=\"{ 'border-color': backgroundColor, 'color': backgroundColor }\">\n {{ buttonCancelTitle }}\n </button>\n </div>\n <div class=\"w-half\">\n <button class=\"button-style\" (click)=\"submitTag(tagger)\" [ngStyle]=\"{ 'border-color': backgroundColor, 'background': backgroundColor, 'color': textColor }\" [disabled]=\"!form.name || !form.url && isShowLink\">\n {{ buttonCreateTitle }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"tagger.tags && isShowView\">\n <ng-container *ngFor=\"let tag of tagger.tags; let subindex = index\">\n <div class=\"tagging flex items-start\" (mouseover)=\"changeStyleHover(tag.id+subindex,true)\" (click)=\"changeStyleClick(tag.id+subindex, tag)\"\n (mouseout)=\"changeStyleHover(tag.id+subindex,false)\" [ngStyle]=\"{\n 'top.%': tag.y, \n 'left.%': tag.x\n }\">\n <div class=\"pin mr-2 pointer\">\n </div>\n <div [id]=\"tag.id+subindex\" class=\"content\" style=\"display: none;\">\n <div class=\"flex items-center justify-between gap-2\">\n <ng-container *ngIf=\"isShowThumbnail\">\n <div class=\"thumnbnail\">\n <img [src]=\"tagger.url\" [ngStyle]=\"{'object-position':''+tag.x+'% '+tag.y+'%'+'', 'object-fit': 'none'}\">\n </div>\n </ng-container>\n <div class=\"text-left\">\n <div class=\"name\">{{ tag.name }}</div>\n <div *ngIf=\"isShowPrice\" class=\"mt-1 price\" >{{ tag.price | currency:'USD' }}</div>\n <div *ngIf=\"isShowLink\" class=\"link mt-1 pointer\" (click)=\"goToTag(tag)\">Go to link</div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</div>\n\n<ng-container *ngIf=\"isShowShop\">\n <div class=\"shop flex items-center justify-between\" [ngStyle]=\"{ 'background': backgroundColor }\" (click)=\"goToURL(tagger.urlShop!)\">\n <div class=\"w-half flex items-center justify-content-start\">\n {{ titleShop }}\n </div>\n <div class=\"flex items-center justify-content-end w-half\">\n <i class=\"material-icons\">navigate_next</i>\n </div>\n </div>\n</ng-container>", styles: ["@import\"~material-icons/iconfont/material-icons.css\";ngx-image-tagger{font-family:inherit;font-size:12px}ngx-image-tagger .pointer{cursor:pointer}ngx-image-tagger input{width:100%}ngx-image-tagger .items-end{align-items:end}ngx-image-tagger .items-start{align-items:start}ngx-image-tagger .items-center{align-items:center}ngx-image-tagger .justify-content-start{justify-content:start}ngx-image-tagger .justify-content-center{justify-content:center}ngx-image-tagger .justify-content-end{justify-content:end}ngx-image-tagger .justify-space-between{justify-content:space-between}ngx-image-tagger .w-half{width:50%}ngx-image-tagger .ml-2{margin-left:.5rem}ngx-image-tagger .mr-2{margin-right:.5rem}ngx-image-tagger .mb-2{margin-bottom:.5rem}ngx-image-tagger .mb-3{margin-bottom:.75rem}ngx-image-tagger .mt-1{margin-top:.25rem}ngx-image-tagger .mt-2{margin-top:.5rem}ngx-image-tagger .text-left{text-align:left}ngx-image-tagger .flex{display:flex}ngx-image-tagger .flex-col{direction:column}ngx-image-tagger .gap-2{gap:.5rem}ngx-image-tagger .thumnbnail{min-width:70px!important;width:70px!important;height:70px!important}ngx-image-tagger .thumnbnail img{min-width:70px!important;width:70px!important;height:70px!important;border-radius:6px}ngx-image-tagger .create-title{font-size:14px;text-align:center}ngx-image-tagger input.input-style{padding:10px;border-radius:6px;font-size:inherit;border:2px solid #eee;outline:none;box-sizing:border-box}ngx-image-tagger button{font-size:inherit;cursor:pointer;width:100%}ngx-image-tagger .w-full{width:100%}ngx-image-tagger .button-style[disabled]{border:1px solid #eee!important;background-color:#eee!important;color:#bbb!important}ngx-image-tagger .button-style{border:1px solid;padding:6px 12px;text-align:center;text-decoration:none;display:inline-block;border-radius:6px}ngx-image-tagger .button-style.outline{border:1px solid;background:white;padding:6px 12px;text-align:center;text-decoration:none;display:inline-block;border-radius:6px}ngx-image-tagger .tagger{position:relative;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;display:inline-block}ngx-image-tagger .tagger img{width:100%;object-fit:contain;object-position:center;height:100%}ngx-image-tagger .tagger .pin{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;height:15px;width:15px;border:2px solid;color:#fff;border-top-right-radius:100%;border-bottom-left-radius:100%;border-bottom-right-radius:100%;background-color:#fff;color:#eee}ngx-image-tagger .tagger .pin i{font-size:18px}ngx-image-tagger .tagger .add-tag{position:absolute;z-index:1}ngx-image-tagger .tagger .add-tag .content{width:200px;background-color:#fff;padding:14px;border-radius:6px;border:1px solid #fafafa;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}ngx-image-tagger .tagger .add-tag .content input{font-size:10px}ngx-image-tagger .tagger .add-tag .content input::placeholder{font-size:10px}ngx-image-tagger .tagger .button-tag{font-size:10px!important}ngx-image-tagger .tagger .tagging.is-view{width:auto}ngx-image-tagger .tagger .tagging{position:absolute}ngx-image-tagger .tagger .tagging i{font-size:14px}ngx-image-tagger .tagger .tagging .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ngx-image-tagger .tagger .tagging .price{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}ngx-image-tagger .tagger .tagging .link{color:#007ac1;transition:all .4s ease;font-size:10px}ngx-image-tagger .tagger .tagging .content{width:200px;background-color:#fff;padding:14px;border-radius:6px;border:1px solid #fafafa;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}ngx-image-tagger .shop{padding:7.5px 10px;cursor:pointer;color:#fff;margin-top:-6px}ngx-image-tagger .shop-icon.with-shop{bottom:10px;left:10px}ngx-image-tagger .shop-icon.without-shop{bottom:15px;left:10px}ngx-image-tagger .shop-icon{position:absolute;height:30px;display:flex;align-items:center;justify-content:center;width:30px;background-color:#fff;color:#6e6e6e;border-radius:100%;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:pointer}ngx-image-tagger .shop-icon i{font-size:16px}ngx-image-tagger .shop-icon.active{color:#444}ngx-image-tagger .shop-icon:hover{transition:all .4s ease;color:#444}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["options"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxImageTaggerComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-image-tagger', encapsulation: ViewEncapsulation.None, template: "<div class=\"tagger\" id=\"{{ tagger.idParent }}\">\n <img alt=\"Image Tagger\" id=\"{{ tagger.id }}\" [src]=\"tagger.url\" [ngClass]=\"imageClassList\"> \n <ng-container *ngIf=\"tagger?.tags && tagger.tags?.length! > 0 && onShowTagMode === 'IconClick'\">\n <div class=\"shop-icon\" [class.active]=\"isShowView\" (click)=\"isShowView = !isShowView\" [class.without-shop]=\"!isShowShop\" [class.with-shop]=\"isShowShop\">\n <i class=\"material-icons\">local_mall</i>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"isShowForm\">\n <div class=\"add-tag flex\" *ngIf=\"isAllowCreate\" [ngStyle]=\"{\n 'top.%': tagger.y , \n 'left.%': tagger.x\n }\" [class.items-start]=\"tagger.isOffsideY && !tagger.isOffsideX || tagger.isOffsideY && tagger.isOffsideX\">\n\n <div class=\"pin mr-2\"></div>\n\n <div class=\"content\">\n <ng-container *ngIf=\"placeholderCreateTitle\">\n <div class=\"mb-3 create-title\">\n {{ placeholderCreateTitle }}\n </div>\n </ng-container>\n <div>\n <input class=\"input-style\" [(ngModel)]=\"form.name\" [placeholder]=\"placeholderName\" type=\"text\" [ngClass]=\"inputClassList\">\n </div>\n <ng-container *ngIf=\"isShowPrice\">\n <div class=\"mt-2\">\n <input class=\"input-style\" [(ngModel)]=\"form.price\" currencyMask [options]=\"{ prefix: '$ ', thousands: '.', decimal: ',' }\" [placeholder]=\"placeholderPrice\" [ngClass]=\"inputClassList\">\n </div>\n </ng-container>\n <ng-container *ngIf=\"isShowLink\">\n <div class=\"mt-2\">\n <input class=\"input-style\" [(ngModel)]=\"form.url\" [placeholder]=\"placeholderLink\" type=\"email\" [ngClass]=\"inputClassList\">\n </div>\n </ng-container>\n <div class=\"mt-2 flex items-center justify-space-between gap-2\">\n <div class=\"w-half\">\n <button class=\"button-style outline\" (click)=\"isShowForm = false\" [ngStyle]=\"{ 'border-color': backgroundColor, 'color': backgroundColor }\">\n {{ buttonCancelTitle }}\n </button>\n </div>\n <div class=\"w-half\">\n <button class=\"button-style\" (click)=\"submitTag(tagger)\" [ngStyle]=\"{ 'border-color': backgroundColor, 'background': backgroundColor, 'color': textColor }\" [disabled]=\"!form.name || !form.url && isShowLink\">\n {{ buttonCreateTitle }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"tagger.tags && isShowView\">\n <ng-container *ngFor=\"let tag of tagger.tags; let subindex = index\">\n <div class=\"tagging flex items-start\" (mouseover)=\"changeStyleHover(tag.id+subindex,true)\" (click)=\"changeStyleClick(tag.id+subindex, tag)\"\n (mouseout)=\"changeStyleHover(tag.id+subindex,false)\" [ngStyle]=\"{\n 'top.%': tag.y, \n 'left.%': tag.x\n }\">\n <div class=\"pin mr-2 pointer\">\n </div>\n <div [id]=\"tag.id+subindex\" class=\"content\" style=\"display: none;\">\n <div class=\"flex items-center justify-between gap-2\">\n <ng-container *ngIf=\"isShowThumbnail\">\n <div class=\"thumnbnail\">\n <img [src]=\"tagger.url\" [ngStyle]=\"{'object-position':''+tag.x+'% '+tag.y+'%'+'', 'object-fit': 'none'}\">\n </div>\n </ng-container>\n <div class=\"text-left\">\n <div class=\"name\">{{ tag.name }}</div>\n <div *ngIf=\"isShowPrice\" class=\"mt-1 price\" >{{ tag.price | currency:'USD' }}</div>\n <div *ngIf=\"isShowLink\" class=\"link mt-1 pointer\" (click)=\"goToTag(tag)\">Go to link</div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</div>\n\n<ng-container *ngIf=\"isShowShop\">\n <div class=\"shop flex items-center justify-between\" [ngStyle]=\"{ 'background': backgroundColor }\" (click)=\"goToURL(tagger.urlShop!)\">\n <div class=\"w-half flex items-center justify-content-start\">\n {{ titleShop }}\n </div>\n <div class=\"flex items-center justify-content-end w-half\">\n <i class=\"material-icons\">navigate_next</i>\n </div>\n </div>\n</ng-container>", styles: ["@import\"~material-icons/iconfont/material-icons.css\";ngx-image-tagger{font-family:inherit;font-size:12px}ngx-image-tagger .pointer{cursor:pointer}ngx-image-tagger input{width:100%}ngx-image-tagger .items-end{align-items:end}ngx-image-tagger .items-start{align-items:start}ngx-image-tagger .items-center{align-items:center}ngx-image-tagger .justify-content-start{justify-content:start}ngx-image-tagger .justify-content-center{justify-content:center}ngx-image-tagger .justify-content-end{justify-content:end}ngx-image-tagger .justify-space-between{justify-content:space-between}ngx-image-tagger .w-half{width:50%}ngx-image-tagger .ml-2{margin-left:.5rem}ngx-image-tagger .mr-2{margin-right:.5rem}ngx-image-tagger .mb-2{margin-bottom:.5rem}ngx-image-tagger .mb-3{margin-bottom:.75rem}ngx-image-tagger .mt-1{margin-top:.25rem}ngx-image-tagger .mt-2{margin-top:.5rem}ngx-image-tagger .text-left{text-align:left}ngx-image-tagger .flex{display:flex}ngx-image-tagger .flex-col{direction:column}ngx-image-tagger .gap-2{gap:.5rem}ngx-image-tagger .thumnbnail{min-width:70px!important;width:70px!important;height:70px!important}ngx-image-tagger .thumnbnail img{min-width:70px!important;width:70px!important;height:70px!important;border-radius:6px}ngx-image-tagger .create-title{font-size:14px;text-align:center}ngx-image-tagger input.input-style{padding:10px;border-radius:6px;font-size:inherit;border:2px solid #eee;outline:none;box-sizing:border-box}ngx-image-tagger button{font-size:inherit;cursor:pointer;width:100%}ngx-image-tagger .w-full{width:100%}ngx-image-tagger .button-style[disabled]{border:1px solid #eee!important;background-color:#eee!important;color:#bbb!important}ngx-image-tagger .button-style{border:1px solid;padding:6px 12px;text-align:center;text-decoration:none;display:inline-block;border-radius:6px}ngx-image-tagger .button-style.outline{border:1px solid;background:white;padding:6px 12px;text-align:center;text-decoration:none;display:inline-block;border-radius:6px}ngx-image-tagger .tagger{position:relative;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;display:inline-block}ngx-image-tagger .tagger img{width:100%;object-fit:contain;object-position:center;height:100%}ngx-image-tagger .tagger .pin{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;height:15px;width:15px;border:2px solid;color:#fff;border-top-right-radius:100%;border-bottom-left-radius:100%;border-bottom-right-radius:100%;background-color:#fff;color:#eee}ngx-image-tagger .tagger .pin i{font-size:18px}ngx-image-tagger .tagger .add-tag{position:absolute;z-index:1}ngx-image-tagger .tagger .add-tag .content{width:200px;background-color:#fff;padding:14px;border-radius:6px;border:1px solid #fafafa;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}ngx-image-tagger .tagger .add-tag .content input{font-size:10px}ngx-image-tagger .tagger .add-tag .content input::placeholder{font-size:10px}ngx-image-tagger .tagger .button-tag{font-size:10px!important}ngx-image-tagger .tagger .tagging.is-view{width:auto}ngx-image-tagger .tagger .tagging{position:absolute}ngx-image-tagger .tagger .tagging i{font-size:14px}ngx-image-tagger .tagger .tagging .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ngx-image-tagger .tagger .tagging .price{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}ngx-image-tagger .tagger .tagging .link{color:#007ac1;transition:all .4s ease;font-size:10px}ngx-image-tagger .tagger .tagging .content{width:200px;background-color:#fff;padding:14px;border-radius:6px;border:1px solid #fafafa;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}ngx-image-tagger .shop{padding:7.5px 10px;cursor:pointer;color:#fff;margin-top:-6px}ngx-image-tagger .shop-icon.with-shop{bottom:10px;left:10px}ngx-image-tagger .shop-icon.without-shop{bottom:15px;left:10px}ngx-image-tagger .shop-icon{position:absolute;height:30px;display:flex;align-items:center;justify-content:center;width:30px;background-color:#fff;color:#6e6e6e;border-radius:100%;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:pointer}ngx-image-tagger .shop-icon i{font-size:16px}ngx-image-tagger .shop-icon.active{color:#444}ngx-image-tagger .shop-icon:hover{transition:all .4s ease;color:#444}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { isAllowCreate: [{
type: Input
}], isShowThumbnail: [{
type: Input
}], imageClassList: [{
type: Input
}], placeholderName: [{
type: Input
}], placeholderPrice: [{
type: Input
}], isShowPrice: [{
type: Input
}], placeholderLink: [{
type: Input
}], isShowLink: [{
type: Input
}], borderColor: [{
type: Input
}], backgroundColor: [{
type: Input
}], textColor: [{
type: Input
}], inputClassList: [{
type: Input
}], placeholderCreateTitle: [{
type: Input
}], buttonCancelTitle: [{
type: Input
}], buttonCreateTitle: [{
type: Input
}], isShowShop: [{
type: Input
}], titleShop: [{
type: Input
}], onShowTagMode: [{
type: Input
}], tagger: [{
type: Input
}], taggerChange: [{
type: Output
}] } });
class NgxImageTaggerModule {
}
NgxImageTaggerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxImageTaggerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxImageTaggerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: NgxImageTaggerModule, declarations: [NgxImageTaggerComponent], imports: [CommonModule,
FormsModule,
NgxCurrencyModule], exports: [NgxImageTaggerComponent] });
NgxImageTaggerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxImageTaggerModule, providers: [
CurrencyPipe,
], imports: [CommonModule,
FormsModule,
NgxCurrencyModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxImageTaggerModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxImageTaggerComponent
],
imports: [
CommonModule,
FormsModule,
NgxCurrencyModule,
],
providers: [
CurrencyPipe,
],
exports: [
NgxImageTaggerComponent
]
}]
}] });
/*
* Public API Surface of ngx-image-tagger
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxImageTaggerComponent, NgxImageTaggerModule };
//# sourceMappingURL=ngodings-ngx-image-tagger.mjs.map
//# sourceMappingURL=ngodings-ngx-image-tagger.mjs.map