frontello-ui-datepicker - npm Package Compare versions

Comparing version 2.1.1 to 3.0.0

datepicker.js

@@ -9,10 +9,8 @@ "use strict";
 			debug: false,
+			language: 'default',
 			classContainer: 'frontello-ui-datepicker',
-			labelActionRemove: 'Remove',
-			labelActionValidate: 'Validate',
-			labelActionToday: 'Today',
-			months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-			weekDays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+			timeSeparator: ':',
+			minuteStep: 1,
 			dateChange: (date) => {
-				this.field.value = date.getDate();
+				this.field.value = date.getDateForHtmlInput();
 			},
@@ -22,7 +20,16 @@ formatExportDate: (date) => {
 			},
-			formatFriendlyDate: (date) => {
-				return date.getWeekDayLabel() + ', ' + date.getMonthLabel() + ' ' + date.getDay() + ' ' + date.getYear();
+			formatExportDateTime: (datetime) => {
+				return String(datetime.getYear()) + '-' + String(datetime.getMonth()).padStart(2, '0') + '-' + String(datetime.getDay()).padStart(2, '0') + 'T' + String(datetime.getHour()).padStart(2, '0') + ':' + String(datetime.getMinute()).padStart(2, '0');
 			},
+			iconLeft: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 15L3.85355 8.35355C3.65829 8.15829 3.65829 7.84171 3.85355 7.64645L10.5 1" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>',
+			iconRight: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 1L11.6464 7.64645C11.8417 7.84171 11.8417 8.15829 11.6464 8.35355L5 15" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>',
+			iconTop: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 11.5L7.64645 4.85355C7.84171 4.65829 8.15829 4.65829 8.35355 4.85355L15 11.5" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>',
+			iconBottom: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 4.5L8.35355 11.1464C8.15829 11.3417 7.84171 11.3417 7.64645 11.1464L1 4.5" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>',
+			iconTimes: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.34315 13.7206L8 8.06371M8 8.06371L13.6569 13.7206M8 8.06371L13.6569 2.40685M8 8.06371L2.34315 2.40685" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>',
+			iconCheck: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9179 3.64124L6.14124 12.4179L0.999997 7.27664" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>',
+			iconNow: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" stroke="black" stroke-width="2"/><path d="M7 8C7 7.44772 7.44772 7 8 7V7C8.55228 7 9 7.44772 9 8V8C9 8.55228 8.55228 9 8 9V9C7.44772 9 7 8.55228 7 8V8Z" fill="black"/></svg>',
 		}, config);
 		
+		this.timePicking = this.field.type == 'datetime-local';
+		
 		this.nulable = !(this.field.required);
@@ -49,3 +56,7 @@ this.date = null;
 		} else {
-			this.field.type = 'date';
+			if (this.timePicking) {
+				this.field.type = 'datetime-local';
+			} else {
+				this.field.type = 'date';
+			}
 		}
@@ -62,2 +73,4 @@ }
 		
+		this.dayPicker();
+		
 		this.alignPicker();
@@ -103,2 +116,7 @@ }
 		}
+		
+		// Horizontal
+		const parentHeight = this._getElementHeight(this.container.parentNode);
+		
+		this.container.style.top = parentHeight + 'px';
 	}
@@ -127,4 +145,18 @@
 		this.date = (date == 'today') ? new Date() : new Date(date);
-		this.date.setHours(0);
-		this.date.setMinutes(0);
+		if (this.timePicking) {
+			if (this.config.minuteStep > 1) {
+				let minute = this.date.getMinutes();
+				let modulo = this.date.getMinutes() % this.config.minuteStep;
+				if (modulo) {
+					minute = minute - modulo + this.config.minuteStep;
+					if (minute > 59) {
+						minute = minute % 60;
+					}
+					this.date.setMinutes(minute);
+				}
+			}
+		} else {
+			this.date.setHours(0);
+			this.date.setMinutes(0);
+		}
 		this.date.setSeconds(0);
@@ -142,10 +174,33 @@ this.date.setMilliseconds(0);
 		
-		return this.config.formatExportDate(this);
+		return this.date.toISOString();
 	}
 	
-	getDateFriendly()
+	getDateForHtmlInput()
 	{
-		return this.config.formatFriendlyDate(this);
+		if (this.date == null) {
+			return null;
+		}
+		
+		let date = this.date.getFullYear()
+			+ '-'
+			+ String(this.date.getMonth() + 1).padStart(2, '0')
+			+ '-'
+			+ String(this.date.getDate()).padStart(2, '0');
+		
+		if (this.timePicking) {
+			date = date + 'T' + String(this.date.getHours()).padStart(2, '0') + ':' + String(this.date.getMinutes()).padStart(2, '0');
+		}
+		
+		return date;
 	}
 	
+	getDateFriendly(shorten = false)
+	{
+		if (this.timePicking) {
+			return this.date.toLocaleDateString(this.config.language, { weekday: (shorten ? 'short' : 'long'), year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' });
+		} else {
+			return this.date.toLocaleDateString(this.config.language, { weekday: (shorten ? 'short' : 'long'), year: 'numeric', month: 'long', day: 'numeric' });
+		}
+	}
+	
 	setYear(year)
@@ -164,2 +219,28 @@ {
 	
+	setPrevYear()
+	{
+		if (this.config.debug) {
+			console.log('Set month : ' + month);
+		}
+		
+		this.setYear(this.getYear() - 1);
+		
+		this._renderDate();
+		
+		return this;
+	}
+	
+	setNextYear()
+	{
+		if (this.config.debug) {
+			console.log('Set month : ' + month);
+		}
+		
+		this.setYear(this.getYear() + 1);
+		
+		this._renderDate();
+		
+		return this;
+	}
+	
 	getYear()
@@ -172,2 +253,12 @@ {
 	{
+		if (month > 12) {
+			month = month%12;
+		}
+		if (month < 0) {
+			if (month < 12) {
+				month = month%12;
+			}
+			month = (12+month);
+		}
+		
 		if (this.config.debug) {
@@ -184,2 +275,20 @@ console.log('Set month : ' + month);
 	
+	upMonth()
+	{
+		this.setMonth(this.getMonth() + 1);
+		
+		this._renderDate();
+		
+		return this;
+	}
+	
+	downMonth()
+	{
+		this.setMonth(this.getMonth() - 1);
+		
+		this._renderDate();
+		
+		return this;
+	}
+	
 	getMonth()
@@ -190,5 +299,5 @@ {
 	
-	getMonthLabel()
+	getMonthLabel(shorten = false)
 	{
-		return this.config.months[this.getMonth(this.date) - 1];
+		return this.date.toLocaleDateString(this.config.language, { month: (shorten ? 'short' : 'long') });
 	}
@@ -243,5 +352,11 @@
 	
-	getWeekDayLabel()
+	getWeekDayLabel(shorten = false)
 	{
-		return this.config.weekDays[this.getWeekDay(this.date) - 1];
+		let weekDayLabel = this.config.weekDays[this.getWeekDay(this.date) - 1];
+		
+		if (shorten && weekDayLabel.length > 3) {
+			weekDayLabel = weekDayLabel.substring(0, 3) + '.';
+		}
+		
+		return weekDayLabel;
 	}
@@ -254,20 +369,130 @@
 	
-	_renderDate(eventChange = true)
+	setHour(hour)
 	{
+		if (hour > 23) {
+			hour = hour%24;
+		}
+		if (hour < 0) {
+			if (hour < 24) {
+				hour = hour%24;
+			}
+			hour = (24+hour);
+		}
+		
 		if (this.config.debug) {
-			console.log('Render date : ' + this.date);
+			console.log('Set hour : ' + hour);
 		}
 		
-		this._renderLabel();
+		this.date.setHours(hour);
 		
-		this._buildYearPicker();
-		this._renderYear();
+		this._renderDate();
 		
-		this._renderMonth();
+		return this;
+	}
+	
+	upHour()
+	{
+		this.setHour(this.getHour() + 1);
 		
-		this._renderWeek();
+		this._renderDate();
 		
-		this._buildDayPicker();
-		this._renderDay();
+		return this;
+	}
+	
+	downHour()
+	{
+		this.setHour(this.getHour() - 1);
 		
+		this._renderDate();
+		
+		return this;
+	}
+	
+	getHour()
+	{
+		return this.date.getHours();
+	}
+	
+	setMinute(minute)
+	{
+		if (this.config.minuteStep) {
+			let modulo = minute % this.config.minuteStep;
+			if (modulo) {
+				minute = minute - modulo + this.config.minuteStep;
+			}
+		}
+		
+		if (minute > 59) {
+			minute = minute%60;
+		}
+		if (minute < 0) {
+			if (minute < 60) {
+				minute = minute%60;
+			}
+			minute = (60+minute);
+		}
+		
+		if (this.config.debug) {
+			console.log('Set minute : ' + minute);
+		}
+		
+		this.date.setMinutes(minute);
+		
+		this._renderDate();
+		
+		return this;
+	}
+	
+	upMinute()
+	{
+		let minute = 
+		
+		this.setMinute(this.getMinute() + this.config.minuteStep);
+		
+		this._renderDate();
+		
+		return this;
+	}
+	
+	downMinute()
+	{
+		this.setMinute(this.getMinute() - this.config.minuteStep);
+		
+		this._renderDate();
+		
+		return this;
+	}
+	
+	getMinute()
+	{
+		return this.date.getMinutes();
+	}
+	
+	_renderDate(eventChange = true)
+	{
+		if (this.config.debug) {
+			console.log('Render date : ' + this.date);
+		}
+		
+		if (this.date) {
+			this._renderLabel();
+			
+			if (this.timePicking) {
+				this._renderHour();
+				this._renderMinute();
+			}
+			
+			this._buildYearPicker();
+			this._renderYear();
+			
+			this._renderMonth();
+			
+			this._renderWeek();
+			
+			this._buildDayPicker();
+			this._renderDay();
+			
+			this.dateLabel.innerHTML = this.getDateFriendly(true);
+		}
+		
 		this.config.dateChange(this);
@@ -283,3 +508,3 @@
 		if (this.date == null) {
-			this.datelabel.innerHTML = '';
+			this.monthAndYearLabel.innerHTML = '';
 			
@@ -289,5 +514,41 @@ return;
 		
-		this.datelabel.innerHTML = this.getDateFriendly();
+		let monthlabel = this.getMonthLabel();
+		monthlabel = monthlabel.charAt(0).toUpperCase() + monthlabel.slice(1);
+		
+		this.monthAndYearLabel.innerHTML = monthlabel + ' ' + this.getYear();
 	}
 	
+	dayPicker()
+	{
+		this.pickerMode = 'day';
+		this.dayNav.style.display = '';
+		if (this.timePicking) {
+			this.hourAndMinute.style.display = '';
+		}
+		this.monthAndYear.style.display = 'none';
+		
+		this.monthAndYearLabel.classList.remove('open');
+	}
+	
+	monthPicker()
+	{
+		this.pickerMode = 'month';
+		this.dayNav.style.display = 'none';
+		if (this.timePicking) {
+			this.hourAndMinute.style.display = 'none';
+		}
+		this.monthAndYear.style.display = '';
+		
+		this.monthAndYearLabel.classList.add('open');
+	}
+	
+	togglePicker()
+	{
+		if (this.pickerMode == 'day') {
+			this.monthPicker();
+		} else {
+			this.dayPicker();
+		}
+	}
+	
 	_renderYear()
@@ -341,2 +602,16 @@ {
 	
+	_renderHour()
+	{
+		if (this.date == null) return;
+		
+		this.hourValue.innerHTML = this.getHour();
+	}
+	
+	_renderMinute()
+	{
+		if (this.date == null) return;
+		
+		this.minuteValue.innerHTML = String(this.getMinute()).padStart(2, '0');
+	}
+	
 	_build()
@@ -354,3 +629,3 @@ {
 		
-		this._buildSummary();
+		this._buildMainNav();
 		this._buildNav();
@@ -412,20 +687,42 @@ this._buildControls();
 	
-	_buildSummary()
+	_buildMainNav()
 	{
-		this.summary = document.createElement('div');
-		this.summary.classList.add('summary');
-		this.container.append(this.summary);
+		this.mainNav = document.createElement('div');
+		this.mainNav.classList.add('main-nav');
+		this.container.append(this.mainNav);
 		
-		this.datelabel = document.createElement('div');
-		this.datelabel.classList.add('date-label');
-		this.summary.append(this.datelabel);
+		this.monthAndYearLabel = document.createElement('a');
+		this.monthAndYearLabel.classList.add('action');
+		this.monthAndYearLabel.classList.add('month-and-year-label');
+		this.mainNav.append(this.monthAndYearLabel);
+		this.monthAndYearLabel.addEventListener('click', (e) => {
+			this.togglePicker();
+		});
 		
 		this.actionToday = document.createElement('a');
-		this.actionToday.classList.add('button');
+		this.actionToday.classList.add('action');
 		this.actionToday.classList.add('today');
-		this.actionToday.innerHTML = this.config.labelActionToday;
+		this.actionToday.innerHTML = this.config.iconNow;
 		this.actionToday.addEventListener('click', (e) => {
 			this.setDate('today');
 		});
-		this.summary.append(this.actionToday);
+		this.mainNav.append(this.actionToday);
+		
+		this.actionToday = document.createElement('a');
+		this.actionToday.classList.add('action');
+		this.actionToday.classList.add('prev-month');
+		this.actionToday.innerHTML = this.config.iconLeft;
+		this.actionToday.addEventListener('click', (e) => {
+			this.downMonth();
+		});
+		this.mainNav.append(this.actionToday);
+		
+		this.actionToday = document.createElement('a');
+		this.actionToday.classList.add('action');
+		this.actionToday.classList.add('next-month');
+		this.actionToday.innerHTML = this.config.iconRight;
+		this.actionToday.addEventListener('click', (e) => {
+			this.upMonth();
+		});
+		this.mainNav.append(this.actionToday);
 	}
@@ -437,15 +734,6 @@
 		this.picker.classList.add('picker');
+		this.picker.classList.add('day');
 		
 		this.container.append(this.picker);
 		
-		this.yearNav = document.createElement('nav');
-		this.yearNav.classList.add('year-column');
-		this.picker.append(this.yearNav);
-		//this._buildYearPicker();
-		
-		this.monthNav = document.createElement('nav');
-		this.monthNav.classList.add('month-column');
-		this.picker.append(this.monthNav);
-		this._buildMonthPicker();
-		
 		this.dayNav = document.createElement('nav');
@@ -461,2 +749,44 @@ this.dayNav.classList.add('days-column');
 		
+		if (this.timePicking) {
+			this.hourAndMinute = document.createElement('div');
+			this.hourAndMinute.classList.add('hour-and-minute');
+			
+			this.container.append(this.hourAndMinute);
+			
+			// Hour
+			this.hour = document.createElement('nav');
+			this.hour.classList.add('hour');
+			this.hourAndMinute.append(this.hour);
+			
+			this.hourNav = document.createElement('nav');
+			this.hourNav.classList.add('hour-nav');
+			this.hour.append(this.hourNav);
+			
+			this.hourValue = document.createElement('nav');
+			this.hourValue.classList.add('hour-value');
+			this.hour.append(this.hourValue);
+			this._buildHourPicker();
+			
+			// Time separator
+			let timeSeparator = document.createElement('div');
+			timeSeparator.classList.add('time-separator');
+			timeSeparator.innerHTML = this.config.timeSeparator;
+			this.hourAndMinute.append(timeSeparator);
+			
+			// Minute
+			this.minute = document.createElement('nav');
+			this.minute.classList.add('minute');
+			this.hourAndMinute.append(this.minute);
+			
+			this.minuteValue = document.createElement('nav');
+			this.minuteValue.classList.add('minute-value');
+			this.minute.append(this.minuteValue);
+			
+			this.minuteNav = document.createElement('nav');
+			this.minuteNav.classList.add('minute-nav');
+			this.minute.append(this.minuteNav);
+			
+			this._buildMinutePicker();
+		}
+		
 		this.monthDayNav = document.createElement('nav');
@@ -466,5 +796,62 @@ this.monthDayNav.classList.add('month-days');
 		
+		this.monthAndYear = document.createElement('div');
+		this.monthAndYear.classList.add('month-and-year');
+		
+		this.picker.append(this.monthAndYear);
+		
+		this.monthNav = document.createElement('nav');
+		this.monthNav.classList.add('month-column');
+		this.monthAndYear.append(this.monthNav);
+		this._buildMonthPicker();
+		
+		this.yearNav = document.createElement('nav');
+		this.yearNav.classList.add('year-column');
+		this.monthAndYear.append(this.yearNav);
+		//this._buildYearPicker();
+		
 		//this._buildDayPicker();
 	}
 	
+	_buildHourPicker()
+	{
+		let hourNext = document.createElement('a');
+		hourNext.classList.add('action');
+		hourNext.classList.add('next');
+		hourNext.innerHTML = this.config.iconTop
+		hourNext.addEventListener('click', (e) => {
+			this.upHour();
+		});
+		this.hourNav.append(hourNext);
+		
+		let hourPrev = document.createElement('a');
+		hourPrev.classList.add('action');
+		hourPrev.classList.add('prev');
+		hourPrev.innerHTML = this.config.iconBottom;
+		hourPrev.addEventListener('click', (e) => {
+			this.downHour();
+		});
+		this.hourNav.append(hourPrev);
+	}
+	
+	_buildMinutePicker()
+	{
+		let minuteNext = document.createElement('a');
+		minuteNext.classList.add('action');
+		minuteNext.classList.add('next');
+		minuteNext.innerHTML = this.config.iconTop;
+		minuteNext.addEventListener('click', (e) => {
+			this.upMinute();
+		});
+		this.minuteNav.append(minuteNext);
+		
+		let minutePrev = document.createElement('a');
+		minutePrev.classList.add('action');
+		minutePrev.classList.add('prev');
+		minutePrev.innerHTML = this.config.iconBottom;
+		minutePrev.addEventListener('click', (e) => {
+			this.downMinute();
+		});
+		this.minuteNav.append(minutePrev);
+	}
+	
 	_buildYearPicker()
@@ -480,6 +867,7 @@ {
 		let yearPrev = document.createElement('a');
-		yearPrev.classList.add('button');
+		yearPrev.classList.add('action');
 		yearPrev.classList.add('prev');
+		yearPrev.innerHTML = this.config.iconTop;
 		yearPrev.addEventListener('click', (e) => {
-			this.setYear(this.getYear()-1);
+			this.setPrevYear();
 		});
@@ -499,6 +887,7 @@ this.yearNav.append(yearPrev);
 		let yearNext = document.createElement('a');
-		yearNext.classList.add('button');
+		yearNext.classList.add('action');
 		yearNext.classList.add('next');
+		yearNext.innerHTML = this.config.iconBottom;
 		yearNext.addEventListener('click', (e) => {
-			this.setYear(this.getYear()+1);
+			this.setNextYear();
 		});
@@ -511,4 +900,8 @@ this.yearNav.append(yearNext);
 		for (let monthId = 1; monthId <= 12; monthId++) {
+			let date = new Date();
+			date.setMonth(monthId - 1);
+			let monthLabel = date.toLocaleDateString(this.config.language, { month: 'long' });
+			monthLabel = monthLabel.charAt(0).toUpperCase() + monthLabel.slice(1);
 			let month = document.createElement('a');
-			month.innerText = this.config.months[monthId - 1];
+			month.innerText = monthLabel;
 			month.dataset.monthId = monthId;
@@ -524,6 +917,11 @@ this.monthNav.append(month);
 	{
-		for (var dayId = 1; dayId <= 7; dayId++) {
+		for (var weekDayId = 1; weekDayId <= 7; weekDayId++) {
+			let date = new Date();
+			let dayDiff = weekDayId - date.getDay();
+			date.setDate(date.getDate() + dayDiff);
+			let weekDayLabel = date.toLocaleDateString(this.config.language, { weekday: 'short' });
+			weekDayLabel = weekDayLabel.toUpperCase();
 			let day = document.createElement('a');
-			day.innerText = this.config.weekDays[dayId - 1].slice(0, 3);
-			day.dataset.dayId = dayId;
+			day.innerText = weekDayLabel;
+			day.dataset.dayId = weekDayId;
 			this.weekDayNav.append(day);
@@ -567,7 +965,7 @@ day.addEventListener('click', (e) => {
 		this.container.append(this.controls);
-			
+		
 		this.actionClear = document.createElement('a');
-		this.actionClear.classList.add('button');
+		this.actionClear.classList.add('action');
 		this.actionClear.classList.add('clear');
-		this.actionClear.innerHTML = this.config.labelActionRemove;
+		this.actionClear.innerHTML = this.config.iconTimes;
 		this.actionClear.addEventListener('click', (e) => {
@@ -577,7 +975,14 @@ this.unsetDate();
 		this.controls .append(this.actionClear);
-			
+		
+		this.dateLabel = document.createElement('span');
+		this.dateLabel.classList.add('date-label');
+		this.dateLabel.addEventListener('click', (e) => {
+			this.unsetDate();
+		});
+		this.controls .append(this.dateLabel);
+		
 		this.actionValidate = document.createElement('a');
-		this.actionValidate.classList.add('button');
+		this.actionValidate.classList.add('action');
 		this.actionValidate.classList.add('close');
-		this.actionValidate.innerHTML = this.config.labelActionValidate;
+		this.actionValidate.innerHTML = this.config.iconCheck;
 		this.actionValidate.addEventListener('click', (e) => {
@@ -584,0 +989,0 @@ this.closePicker();

package.json

 {
 	"name": "frontello-ui-datepicker",
-	"version": "2.1.1",
-	"description": "UI datepicker",
+	"version": "3.0.0",
+	"description": "Efficient vanilla datepicker",
 	"main": "datepicker.js",
@@ -6,0 +6,0 @@ "scripts": {

README.md

@@ -22,2 +22,8 @@ # Datepicker
   </div>
+  <div class="field">
+    <label class="label">Date</label>
+    <div class="value">
+      <input type="datetime-local" name="date" value="2022-04-01" required>
+    </div>
+  </div>
 </form>
@@ -33,16 +39,6 @@ ```
 document.addEventListener('DOMContentLoaded', function () {
-  Datepicker.init(document.querySelectorAll('input[type="date"]'), {
-    labelYear: 'Années',
-    labelMonth: 'Mois',
-    labelNoDate: 'Aucune date',
-    labelClear: 'Supprimer la date',
-    labelToday: 'Aujourd\'hui',
-    months: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
-    weekDays: ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche'],
-    formatFriendlyDate: (date) => {
-      return date.getWeekDayLabel() + ' ' + date.getDay() + ' ' + date.getMonthLabel() + ' ' + date.getYear()
-    }
-  });
+  Datepicker.init(document.querySelectorAll('input[type="date"]'));
+  Datepicker.init(document.querySelectorAll('input[type="datetime-local"]'));
 });
 </script>
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32305

increased by54.98%

Lines of code

1010

increased by54.2%

Worsened metrics

Number of lines in readme file

43

decreased by-8.51%

No dependency changes