inno-lot-display-wc-standalone 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/inno-lot-display.js +160 -0
  2. package/package.json +14 -0
package/inno-lot-display.js ADDED
@@ -0,0 +1,160 @@
1
+ /**
2
+ * InnoLotDisplay - A standalone Web Component for Innovint Lot Display
3
+ * Framework agnostic, zero-dependencies.
4
+ */
5
+ class InnoLotDisplay extends HTMLElement {
6
+ constructor() {
7
+ super();
8
+ this.attachShadow({ mode: 'open' });
9
+ }
10
+
11
+ static get observedAttributes() {
12
+ return ['lot-code', 'lot-name', 'color', 'type', 'sparkling', 'hide-name', 'large', 'archived', 'with-colon', 'truncate'];
13
+ }
14
+
15
+ attributeChangedCallback() {
16
+ this.render();
17
+ }
18
+
19
+ connectedCallback() {
20
+ this.render();
21
+ }
22
+
23
+ getFillColor(color, isSparkling) {
24
+ if (isSparkling && color === 'white') return '#DCB93F';
25
+ const colors = {
26
+ red: '#802845',
27
+ white: '#e0d752',
28
+ rose: '#FFC3C3',
29
+ orange: '#FF9100',
30
+ nocolor: '#ddd',
31
+ };
32
+ return colors[color] || colors.nocolor;
33
+ }
34
+
35
+ getIconHtml() {
36
+ const type = this.getAttribute('type') || 'wine';
37
+ const color = this.getAttribute('color') || 'nocolor';
38
+ const isSparkling = this.hasAttribute('sparkling');
39
+ const isArchived = this.hasAttribute('archived');
40
+ const fill = this.getFillColor(color, isSparkling);
41
+
42
+ // Standard Wine/Juice Circle
43
+ if (type === 'wine') {
44
+ return `
45
+ <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
46
+ <circle cx="7" cy="7" r="7" fill="${color === 'nocolor' ? 'none' : fill}"
47
+ stroke="${color === 'nocolor' || isArchived ? '#aaa' : 'none'}"
48
+ stroke-dasharray="${isArchived ? '2 2' : 'none'}" />
49
+ ${
50
+ isSparkling
51
+ ? `
52
+ <g fill="white">
53
+ <circle cx="4.8" cy="5" r="2.4" />
54
+ <circle cx="9" cy="9.2" r="2.5" />
55
+ <circle cx="9.4" cy="4.6" r="0.9" />
56
+ <circle cx="4.8" cy="9.8" r="0.9" />
57
+ </g>`
58
+ : ''
59
+ }
60
+ </svg>`;
61
+ }
62
+
63
+ if (type === 'fruit') {
64
+ return `
65
+ <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" fill="${fill}">
66
+ <circle cx="4" cy="3" r="3" />
67
+ <circle cx="4" cy="11" r="3" />
68
+ <circle cx="11" cy="7" r="3" />
69
+ </svg>`;
70
+ }
71
+
72
+ if (type === 'casegoods') {
73
+ return `
74
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="${fill}">
75
+ <rect x="3" y="3" width="14" height="14" rx="1.3" />
76
+ <g stroke="#fff" fill="none" stroke-width="0.5">
77
+ <line x1="12.3" y1="3" x2="12.3" y2="17" />
78
+ <line x1="7.7" y1="17" x2="7.7" y2="3" />
79
+ <line x1="17" y1="12.3" x2="3" y2="12.3" />
80
+ <line x1="3" y1="7.7" x2="17" y2="7.7" />
81
+ </g>
82
+ </svg>`;
83
+ }
84
+ return '';
85
+ }
86
+
87
+ render() {
88
+ const lotCode = this.getAttribute('lot-code') || '';
89
+ const lotName = this.getAttribute('lot-name') || '';
90
+ const hideName = this.hasAttribute('hide-name');
91
+ const isLarge = this.hasAttribute('large');
92
+ const isArchived = this.hasAttribute('archived');
93
+ const withColon = this.hasAttribute('with-colon');
94
+ const truncate = this.hasAttribute('truncate');
95
+
96
+ this.shadowRoot.innerHTML = `
97
+ <style>
98
+ :host {
99
+ display: inline-flex;
100
+ align-items: center;
101
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
102
+ gap: 8px;
103
+ cursor: default;
104
+ transition: opacity 0.2s;
105
+ }
106
+ :host([archived]) {
107
+ opacity: 0.6;
108
+ }
109
+ .icon-container {
110
+ width: ${isLarge ? '24px' : '16px'};
111
+ height: ${isLarge ? '24px' : '16px'};
112
+ display: flex;
113
+ flex-shrink: 0;
114
+ }
115
+ .text-container {
116
+ font-size: ${isLarge ? '16px' : '13px'};
117
+ color: #333;
118
+ white-space: ${truncate ? 'nowrap' : 'normal'};
119
+ overflow: ${truncate ? 'hidden' : 'visible'};
120
+ text-overflow: ${truncate ? 'ellipsis' : 'clip'};
121
+ max-width: ${truncate ? '150px' : 'none'};
122
+ }
123
+ .lot-name {
124
+ font-style: italic;
125
+ color: #666;
126
+ margin-left: 4px;
127
+ }
128
+ :host([link-enabled]) {
129
+ cursor: pointer;
130
+ color: #007bff;
131
+ }
132
+ :host([link-enabled]:hover) .text-container {
133
+ text-decoration: underline;
134
+ }
135
+ </style>
136
+
137
+ <div class="icon-container">
138
+ ${this.getIconHtml()}
139
+ </div>
140
+
141
+ <div class="text-container">
142
+ <span class="lot-code">${lotCode}${withColon ? ':' : ''}</span>
143
+ ${!hideName && lotName ? `<span class="lot-name">${lotName}</span>` : ''}
144
+ </div>
145
+ `;
146
+
147
+ // Handle click events
148
+ this.onclick = () => {
149
+ this.dispatchEvent(
150
+ new CustomEvent('inno-lot-click', {
151
+ detail: { lotCode },
152
+ bubbles: true,
153
+ composed: true,
154
+ }),
155
+ );
156
+ };
157
+ }
158
+ }
159
+
160
+ customElements.define('inno-lot-display', InnoLotDisplay);
package/package.json ADDED
@@ -0,0 +1,14 @@
1
+ {
2
+ "name": "inno-lot-display-wc-standalone",
3
+ "version": "1.0.0",
4
+ "description": "Framework-agnostic Innovint Lot Display Web Component",
5
+ "main": "inno-lot-display.js",
6
+ "files": [
7
+ "inno-lot-display.js"
8
+ ],
9
+ "author": "InnoVint",
10
+ "license": "MIT",
11
+ "publishConfig": {
12
+ "access": "public"
13
+ }
14
+ }