@progressive-development/pd-content 1.0.0 → 1.0.1

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 (4) hide show
  1. package/dist/pd-panel-viewer/PdPanelViewer.d.ts +3 -0
  2. package/dist/pd-panel-viewer/PdPanelViewer.d.ts.map +1 -1
  3. package/dist/pd-panel-viewer/PdPanelViewer.js +23 -15
  4. package/package.json +4 -4
package/dist/pd-panel-viewer/PdPanelViewer.d.ts CHANGED
@@ -17,6 +17,9 @@ import { LitElement } from 'lit';
17
17
  * @cssprop --pd-panel-icon-col-disabled - Navigation icon disabled color. Default: `var(--pd-default-disabled-col)`.
18
18
  * @cssprop --pd-panel-progress-col - Progress bar background color. Default: `rgba(255, 255, 255, 0.4)`.
19
19
  * @cssprop --pd-panel-progress-watched-col - Progress bar watched segment color. Default: `var(--pd-on-primary-col)`.
20
+ * @cssprop --pd-panel-progress-height - Progress bar segment height. Default: `4px`.
21
+ * @cssprop --pd-panel-progress-border-radius - Progress bar segment border radius. Default: `0`.
22
+ * @cssprop --pd-panel-progress-margin - Progress bar container margin. Default: `0.5rem auto`.
20
23
  */
21
24
  export declare class PdPanelViewer extends LitElement {
22
25
  withProgress: boolean;
package/dist/pd-panel-viewer/PdPanelViewer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PdPanelViewer.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/PdPanelViewer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAKrD,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAE3C,YAAY,UAAS;IAGrB,SAAS,SAAK;IAEd,cAAc;IAEd,MAAM,SAAK;IAEX,cAAc;IAEd,QAAQ,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,CAAM;IAEtD,cAAc;IAEd,OAAO,KAAM;IAEb,cAAc;IACd,OAAO,CAAC,eAAe,CAA+B;IACtD,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,cAAc;IACd,OAAO,CAAC,aAAa,CAAS;IAC9B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,MAAM,CAAC,MAAM,0BAwFX;IAEF,IAAI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAId;IAED,MAAM;IAiEN,YAAY;IAqBH,oBAAoB;IAc7B,MAAM,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAK9C;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAsCrB,IAAI;IASJ,QAAQ;IAUR,OAAO,CAAC,cAAc,CAYpB;IAEF,OAAO,CAAC,cAAc,CAsCpB;IAEF,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,gBAAgB,CAMtB;IAIF,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,kBAAkB;CAY3B"}
1
+ {"version":3,"file":"PdPanelViewer.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/PdPanelViewer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAKrD,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAE3C,YAAY,UAAS;IAGrB,SAAS,SAAK;IAEd,cAAc;IAEd,MAAM,SAAK;IAEX,cAAc;IAEd,QAAQ,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,CAAM;IAEtD,cAAc;IAEd,OAAO,KAAM;IAEb,cAAc;IACd,OAAO,CAAC,eAAe,CAA+B;IACtD,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,cAAc;IACd,OAAO,CAAC,aAAa,CAAS;IAC9B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,MAAM,CAAC,MAAM,0BAiGX;IAEF,IAAI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAId;IAED,MAAM;IA0EN,YAAY;IAQH,oBAAoB;IAS7B,MAAM,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAK9C;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAsCrB,IAAI;IASJ,QAAQ;IAUR,OAAO,CAAC,cAAc,CAUpB;IAEF,OAAO,CAAC,cAAc,CAqCpB;IAEF,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,gBAAgB,CAMtB;IAIF,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,kBAAkB;CAY3B"}
package/dist/pd-panel-viewer/PdPanelViewer.js CHANGED
@@ -35,7 +35,7 @@ class PdPanelViewer extends LitElement {
35
35
  this._dragThreshold = 5;
36
36
  /** @ignore */
37
37
  this._isHorizontalDrag = null;
38
- // --- Pointer Event Handlers ---
38
+ // --- Pointer Event Handlers (Drag Gesture on .panel-content) ---
39
39
  this._onPointerDown = (e) => {
40
40
  if (e.button !== 0) return;
41
41
  this._activePointerId = e.pointerId;
@@ -43,7 +43,7 @@ class PdPanelViewer extends LitElement {
43
43
  this._pointerStartY = e.clientY;
44
44
  this._pointerMoved = false;
45
45
  this._isHorizontalDrag = null;
46
- this.setPointerCapture(e.pointerId);
46
+ e.currentTarget.setPointerCapture(e.pointerId);
47
47
  };
48
48
  this._onPointerMove = (e) => {
49
49
  if (e.pointerId !== this._activePointerId) return;
@@ -107,11 +107,19 @@ class PdPanelViewer extends LitElement {
107
107
  box-sizing: border-box;
108
108
  }
109
109
 
110
+ .panel-content {
111
+ position: relative;
112
+ width: 100%;
113
+ height: 100%;
114
+ touch-action: pan-y;
115
+ }
116
+
110
117
  pd-icon {
111
118
  position: absolute;
112
119
  top: var(--pd-panel-nav-top, calc(50% - 25px));
113
120
  height: 50px;
114
121
  cursor: pointer;
122
+ z-index: 1;
115
123
  --pd-icon-col-active: var(--pd-panel-icon-col, var(--pd-on-primary-col));
116
124
  --pd-icon-col-hover: var(
117
125
  --pd-panel-icon-col-hover,
@@ -145,7 +153,7 @@ class PdPanelViewer extends LitElement {
145
153
  position: relative;
146
154
  height: 20px;
147
155
  width: 50%;
148
- margin: 0.5rem auto;
156
+ margin: var(--pd-panel-progress-margin, 0.5rem auto);
149
157
  display: grid;
150
158
  grid-auto-flow: column;
151
159
  grid-auto-columns: 1fr;
@@ -156,7 +164,8 @@ class PdPanelViewer extends LitElement {
156
164
 
157
165
  #progress > div {
158
166
  background: var(--pd-panel-progress-col, rgba(255, 255, 255, 0.4));
159
- height: 4px;
167
+ height: var(--pd-panel-progress-height, 4px);
168
+ border-radius: var(--pd-panel-progress-border-radius, 0);
160
169
  transition: background 0.3s linear;
161
170
  cursor: pointer;
162
171
  }
@@ -196,7 +205,16 @@ class PdPanelViewer extends LitElement {
196
205
  })}"
197
206
  aria-live="polite"
198
207
  >
199
- <slot></slot>
208
+ <div
209
+ class="panel-content"
210
+ @pointerdown=${this._onPointerDown}
211
+ @pointermove=${this._onPointerMove}
212
+ @pointerup=${this._onPointerUp}
213
+ @pointercancel=${this._onPointerCancel}
214
+ @dragstart=${(e) => e.preventDefault()}
215
+ >
216
+ <slot></slot>
217
+ </div>
200
218
  <pd-icon
201
219
  id="prev"
202
220
  icon="previousArrow"
@@ -246,12 +264,6 @@ class PdPanelViewer extends LitElement {
246
264
  `;
247
265
  }
248
266
  firstUpdated() {
249
- this.addEventListener("pointerdown", this._onPointerDown);
250
- this.addEventListener("pointermove", this._onPointerMove);
251
- this.addEventListener("pointerup", this._onPointerUp);
252
- this.addEventListener("pointercancel", this._onPointerCancel);
253
- this.addEventListener("dragstart", (e) => e.preventDefault());
254
- this.style.touchAction = "pan-y";
255
267
  this._resizeObserver = new ResizeObserver(() => {
256
268
  this._panData = {};
257
269
  this._updateLayout();
@@ -264,10 +276,6 @@ class PdPanelViewer extends LitElement {
264
276
  this._resizeObserver.disconnect();
265
277
  this._resizeObserver = null;
266
278
  }
267
- this.removeEventListener("pointerdown", this._onPointerDown);
268
- this.removeEventListener("pointermove", this._onPointerMove);
269
- this.removeEventListener("pointerup", this._onPointerUp);
270
- this.removeEventListener("pointercancel", this._onPointerCancel);
271
279
  }
272
280
  update(changedProperties) {
273
281
  super.update(changedProperties);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progressive-development/pd-content",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Progressive Development content components. ",
5
5
  "author": "PD Progressive Development",
6
6
  "license": "MIT",
@@ -44,9 +44,9 @@
44
44
  "prismjs": "^1.30.0",
45
45
  "pwa-helpers": "^0.9.1",
46
46
  "tslib": "^2.8.1",
47
- "@progressive-development/pd-dialog": "1.0.0",
48
- "@progressive-development/pd-icon": "1.0.0",
49
- "@progressive-development/pd-shared-styles": "0.3.1"
47
+ "@progressive-development/pd-icon": "1.0.1",
48
+ "@progressive-development/pd-shared-styles": "0.3.2",
49
+ "@progressive-development/pd-dialog": "1.0.1"
50
50
  },
51
51
  "customElements": "custom-elements.json",
52
52
  "keywords": [