@colijnit/corecomponents_v12 262.1.7 → 262.1.8
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.
- package/colijnit-corecomponents_v12-262.1.7.tgz +0 -0
- package/fesm2022/colijnit-corecomponents_v12.mjs +11 -443
- package/fesm2022/colijnit-corecomponents_v12.mjs.map +1 -1
- package/index.d.ts +3 -65
- package/package.json +1 -1
- package/lib/components/carousel-3d/style/_layout.scss +0 -62
- package/lib/components/carousel-3d/style/_material-definition.scss +0 -6
- package/lib/components/carousel-3d/style/_theme.scss +0 -4
- package/lib/components/carousel-3d/style/material.scss +0 -4
|
Binary file
|
|
@@ -10,9 +10,6 @@ import { Subject, merge, fromEvent, BehaviorSubject } from 'rxjs';
|
|
|
10
10
|
import * as i1$1 from '@angular/common';
|
|
11
11
|
import { CommonModule, DatePipe } from '@angular/common';
|
|
12
12
|
import { auditTime } from 'rxjs/operators';
|
|
13
|
-
import { PlaneGeometry, Mesh, Vector2, Vector3, MeshPhongMaterial, SpotLight, PerspectiveCamera, Scene, Color as Color$1, AmbientLight, Fog, WebGLRenderer, Box3 } from 'three';
|
|
14
|
-
import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
|
|
15
|
-
import TWEEN from '@tweenjs/tween.js';
|
|
16
13
|
import 'hammerjs';
|
|
17
14
|
import * as i3 from '@angular/cdk/drag-drop';
|
|
18
15
|
import { DragDropModule as DragDropModule$1, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
@@ -4761,444 +4758,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4761
4758
|
}]
|
|
4762
4759
|
}] });
|
|
4763
4760
|
|
|
4764
|
-
class CarouselItem {
|
|
4765
|
-
object;
|
|
4766
|
-
mesh;
|
|
4767
|
-
index;
|
|
4768
|
-
_options;
|
|
4769
|
-
_element;
|
|
4770
|
-
constructor(options, index, onClick) {
|
|
4771
|
-
this._options = options || {};
|
|
4772
|
-
this.index = index;
|
|
4773
|
-
const width = this._options.tileSize?.x || 0;
|
|
4774
|
-
const height = this._options.tileSize?.y || 0;
|
|
4775
|
-
this._element = document.createElement('div');
|
|
4776
|
-
// this._element.style.backgroundColor = this._options.tileBackgroundColor;
|
|
4777
|
-
this._element.style.width = width + "px";
|
|
4778
|
-
this._element.style.height = height + "px";
|
|
4779
|
-
this._element.addEventListener("click", () => {
|
|
4780
|
-
if (onClick) {
|
|
4781
|
-
onClick(this.index);
|
|
4782
|
-
}
|
|
4783
|
-
}, false);
|
|
4784
|
-
this.object = new CSS3DObject(this._element);
|
|
4785
|
-
const geometry = new PlaneGeometry(width, height);
|
|
4786
|
-
this.mesh = new Mesh(geometry, options.tileMaterial);
|
|
4787
|
-
this.mesh.castShadow = true;
|
|
4788
|
-
}
|
|
4789
|
-
setPosition(position) {
|
|
4790
|
-
if (this.mesh) {
|
|
4791
|
-
this.mesh.position.copy(position);
|
|
4792
|
-
}
|
|
4793
|
-
if (this.object) {
|
|
4794
|
-
this.object.position.copy(position);
|
|
4795
|
-
}
|
|
4796
|
-
}
|
|
4797
|
-
setContent(content) {
|
|
4798
|
-
if (this._element) {
|
|
4799
|
-
// remove any exising tile content before setting new content
|
|
4800
|
-
while (this._element.lastElementChild) {
|
|
4801
|
-
this._element.removeChild(this._element.lastElementChild);
|
|
4802
|
-
}
|
|
4803
|
-
try {
|
|
4804
|
-
this._element.appendChild(content);
|
|
4805
|
-
}
|
|
4806
|
-
catch (err) {
|
|
4807
|
-
}
|
|
4808
|
-
}
|
|
4809
|
-
}
|
|
4810
|
-
setVisible(visible) {
|
|
4811
|
-
if (this.mesh) {
|
|
4812
|
-
this.mesh.visible = visible;
|
|
4813
|
-
}
|
|
4814
|
-
if (this.object) {
|
|
4815
|
-
this.object.visible = visible;
|
|
4816
|
-
}
|
|
4817
|
-
}
|
|
4818
|
-
}
|
|
4819
|
-
|
|
4820
|
-
class Carousel3dComponent {
|
|
4821
|
-
canvasContainer;
|
|
4822
|
-
carouselWrapper;
|
|
4823
|
-
set children(children) {
|
|
4824
|
-
this._elementsCreated = false;
|
|
4825
|
-
this._tileElements = children.toArray();
|
|
4826
|
-
this._buildCarousel();
|
|
4827
|
-
}
|
|
4828
|
-
tileWidth;
|
|
4829
|
-
tileHeight;
|
|
4830
|
-
cameraHeight = 50;
|
|
4831
|
-
shadow = false;
|
|
4832
|
-
selectedIndex = 0;
|
|
4833
|
-
indexSelected = new EventEmitter();
|
|
4834
|
-
showClass() {
|
|
4835
|
-
return true;
|
|
4836
|
-
}
|
|
4837
|
-
_camera;
|
|
4838
|
-
_cameraZoom = 0;
|
|
4839
|
-
_backgroundColor = 0xffffff;
|
|
4840
|
-
_sceneCss;
|
|
4841
|
-
_scene;
|
|
4842
|
-
_rendererCss;
|
|
4843
|
-
_renderer;
|
|
4844
|
-
_ambientLight = true;
|
|
4845
|
-
_tileSize = new Vector2();
|
|
4846
|
-
_tileMargin = 20;
|
|
4847
|
-
_targetPositions = [];
|
|
4848
|
-
_tileElements = [];
|
|
4849
|
-
_tileOffset = 0;
|
|
4850
|
-
_tiles3D = [];
|
|
4851
|
-
_planeColor = 0xffffff;
|
|
4852
|
-
_planeHeight = -46;
|
|
4853
|
-
_spotLightPosition = new Vector3(0, 250, -200);
|
|
4854
|
-
_fullCircle = false;
|
|
4855
|
-
_initialized = false;
|
|
4856
|
-
_elementsCreated = false;
|
|
4857
|
-
canNavigateLeft = false;
|
|
4858
|
-
canNavigateRight = false;
|
|
4859
|
-
ngAfterViewInit() {
|
|
4860
|
-
this._buildCarousel();
|
|
4861
|
-
}
|
|
4862
|
-
ngOnDestroy() {
|
|
4863
|
-
this.canvasContainer = undefined;
|
|
4864
|
-
this.carouselWrapper = undefined;
|
|
4865
|
-
this._clearScenes();
|
|
4866
|
-
}
|
|
4867
|
-
handleButtonLeftClick() {
|
|
4868
|
-
this._tileOffset -= 1;
|
|
4869
|
-
this._rotate(400);
|
|
4870
|
-
}
|
|
4871
|
-
handleButtonRightClick() {
|
|
4872
|
-
this._tileOffset += 1;
|
|
4873
|
-
this._rotate(400);
|
|
4874
|
-
}
|
|
4875
|
-
_buildCarousel() {
|
|
4876
|
-
if (!this._initialized) {
|
|
4877
|
-
this._init();
|
|
4878
|
-
}
|
|
4879
|
-
if (this._initialized && !this._elementsCreated) {
|
|
4880
|
-
this._createTiles();
|
|
4881
|
-
}
|
|
4882
|
-
this._checkNavigationButtons();
|
|
4883
|
-
this._resizeCanvasToDisplaySize();
|
|
4884
|
-
}
|
|
4885
|
-
_init() {
|
|
4886
|
-
if (!this.canvasContainer || !this.canvasContainer.nativeElement) {
|
|
4887
|
-
return;
|
|
4888
|
-
}
|
|
4889
|
-
this._initCamera();
|
|
4890
|
-
this._initScene();
|
|
4891
|
-
this._initRenderer();
|
|
4892
|
-
if (this.shadow) {
|
|
4893
|
-
const geometry = new PlaneGeometry(10000, 10000);
|
|
4894
|
-
const material = new MeshPhongMaterial({ color: this._planeColor, shininess: 100 });
|
|
4895
|
-
const plane = new Mesh(geometry, material);
|
|
4896
|
-
plane.receiveShadow = true;
|
|
4897
|
-
plane.rotation.x = -Math.PI / 2;
|
|
4898
|
-
plane.position.y = this._planeHeight;
|
|
4899
|
-
this._scene.add(plane);
|
|
4900
|
-
const spotLight = new SpotLight(0xffffff, 0.5);
|
|
4901
|
-
spotLight.position.copy(this._spotLightPosition);
|
|
4902
|
-
spotLight.castShadow = true;
|
|
4903
|
-
spotLight.shadow.mapSize.width = 512;
|
|
4904
|
-
spotLight.shadow.mapSize.height = 512;
|
|
4905
|
-
spotLight.shadow.camera.near = 50;
|
|
4906
|
-
spotLight.shadow.camera.far = 1200;
|
|
4907
|
-
spotLight.shadow.camera.fov = 30;
|
|
4908
|
-
spotLight.penumbra = 1;
|
|
4909
|
-
this._scene.add(spotLight);
|
|
4910
|
-
}
|
|
4911
|
-
this.carouselWrapper.nativeElement.appendChild(this._rendererCss.domElement);
|
|
4912
|
-
this.canvasContainer.nativeElement.appendChild(this.carouselWrapper.nativeElement);
|
|
4913
|
-
this.canvasContainer.nativeElement.appendChild(this._renderer.domElement);
|
|
4914
|
-
this._render();
|
|
4915
|
-
this._animate();
|
|
4916
|
-
window.addEventListener("resize", () => {
|
|
4917
|
-
this._resizeCanvasToDisplaySize();
|
|
4918
|
-
}, false);
|
|
4919
|
-
this._initialized = true;
|
|
4920
|
-
}
|
|
4921
|
-
_initCamera() {
|
|
4922
|
-
this._camera = new PerspectiveCamera(50, this.canvasContainer.nativeElement.clientWidth / this.canvasContainer.nativeElement.clientHeight, 1, 10000);
|
|
4923
|
-
this._camera.position.z = 600 - this._cameraZoom;
|
|
4924
|
-
this._camera.position.y = this.cameraHeight;
|
|
4925
|
-
this._camera.lookAt(new Vector3());
|
|
4926
|
-
}
|
|
4927
|
-
_initScene() {
|
|
4928
|
-
this._sceneCss = new Scene();
|
|
4929
|
-
this._scene = new Scene();
|
|
4930
|
-
this._scene.background = new Color$1(this._backgroundColor);
|
|
4931
|
-
if (this._ambientLight) {
|
|
4932
|
-
const light = new AmbientLight(0xaaaaaa); // soft white light
|
|
4933
|
-
this._scene.add(light);
|
|
4934
|
-
this._scene.fog = new Fog(this._backgroundColor, 70, 2500);
|
|
4935
|
-
}
|
|
4936
|
-
}
|
|
4937
|
-
_initRenderer() {
|
|
4938
|
-
this._rendererCss = new CSS3DRenderer();
|
|
4939
|
-
this._rendererCss.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
|
|
4940
|
-
this._rendererCss.domElement.style.position = "absolute";
|
|
4941
|
-
this._renderer = new WebGLRenderer({ antialias: true });
|
|
4942
|
-
this._renderer.setPixelRatio(window.devicePixelRatio);
|
|
4943
|
-
this._renderer.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
|
|
4944
|
-
this._renderer.shadowMap.enabled = true;
|
|
4945
|
-
}
|
|
4946
|
-
_disposeObject(obj) {
|
|
4947
|
-
if (obj instanceof Mesh) {
|
|
4948
|
-
if (obj.geometry) {
|
|
4949
|
-
obj.geometry.dispose();
|
|
4950
|
-
}
|
|
4951
|
-
if (obj.material) {
|
|
4952
|
-
Array.isArray(obj.material) ? obj.material.map(m => m.dispose()) : obj.material.dispose();
|
|
4953
|
-
}
|
|
4954
|
-
obj = undefined;
|
|
4955
|
-
}
|
|
4956
|
-
else {
|
|
4957
|
-
obj.element = undefined;
|
|
4958
|
-
obj = undefined;
|
|
4959
|
-
}
|
|
4960
|
-
}
|
|
4961
|
-
_clearScenes() {
|
|
4962
|
-
const meshes = this._tiles3D.map(t => t.mesh);
|
|
4963
|
-
const cssObjs = this._tiles3D.map(t => t.object);
|
|
4964
|
-
this._scene.remove(...meshes);
|
|
4965
|
-
meshes.map(m => this._disposeObject(m));
|
|
4966
|
-
meshes.length = 0;
|
|
4967
|
-
this._sceneCss.remove(...cssObjs);
|
|
4968
|
-
cssObjs.map(o => this._disposeObject(o));
|
|
4969
|
-
cssObjs.length = 0;
|
|
4970
|
-
this._tiles3D.length = 0;
|
|
4971
|
-
this._targetPositions.length = 0;
|
|
4972
|
-
}
|
|
4973
|
-
_createTiles() {
|
|
4974
|
-
this._clearScenes();
|
|
4975
|
-
this._tileSize.x = this.tileWidth;
|
|
4976
|
-
this._tileSize.y = this.tileHeight;
|
|
4977
|
-
const tileWidth = this._tileSize.x + this._tileMargin;
|
|
4978
|
-
const numItems = Math.max(this._tileElements.length, 20);
|
|
4979
|
-
this._fullCircle = this._tileElements.length >= 20;
|
|
4980
|
-
let angleTileDeg = 360 / numItems;
|
|
4981
|
-
const circumference = numItems * tileWidth;
|
|
4982
|
-
const radius = circumference / (Math.PI * 2);
|
|
4983
|
-
const y = this.shadow ? 75 : 45;
|
|
4984
|
-
const len = numItems;
|
|
4985
|
-
let angleDeg = 90;
|
|
4986
|
-
const position = new Vector3();
|
|
4987
|
-
for (var i = 0; i < len; i++) {
|
|
4988
|
-
const angle = angleDeg * (Math.PI / 180); // Radians
|
|
4989
|
-
const x = radius * Math.cos(angle);
|
|
4990
|
-
const z = -radius + radius * Math.sin(angle);
|
|
4991
|
-
position.set(x, y, z);
|
|
4992
|
-
this._targetPositions.push(position.clone());
|
|
4993
|
-
if (i < this._tileElements.length) {
|
|
4994
|
-
const tile = new CarouselItem({ tileSize: this._tileSize }, i, (idx) => this._rotateTo(idx));
|
|
4995
|
-
tile.setPosition(position);
|
|
4996
|
-
tile.setContent(this._tileElements[i].nativeElement);
|
|
4997
|
-
this._scene.add(tile.mesh);
|
|
4998
|
-
this._sceneCss.add(tile.object);
|
|
4999
|
-
this._tiles3D.push(tile);
|
|
5000
|
-
}
|
|
5001
|
-
angleDeg = angleDeg - angleTileDeg; // CW instead of CCW
|
|
5002
|
-
}
|
|
5003
|
-
this._adjustCameraZoom();
|
|
5004
|
-
this._tileOffset = this.selectedIndex;
|
|
5005
|
-
this._rotate(0);
|
|
5006
|
-
this._render();
|
|
5007
|
-
}
|
|
5008
|
-
_adjustCameraZoom() {
|
|
5009
|
-
if (this._tiles3D.length === 0) {
|
|
5010
|
-
return;
|
|
5011
|
-
}
|
|
5012
|
-
const object = this._tiles3D[0].mesh;
|
|
5013
|
-
// offset = offset || 1.15;
|
|
5014
|
-
// get bounding box of object - this will be used to setup controls and camera
|
|
5015
|
-
const boundingBox = new Box3();
|
|
5016
|
-
boundingBox.setFromObject(object);
|
|
5017
|
-
const center = new Vector3();
|
|
5018
|
-
boundingBox.getCenter(center);
|
|
5019
|
-
const size = new Vector3();
|
|
5020
|
-
boundingBox.getSize(size);
|
|
5021
|
-
// get the max side of the bounding box (fits to width OR height as needed )
|
|
5022
|
-
const maxDim = Math.max(size.x, size.y, size.z);
|
|
5023
|
-
this._camera.position.z = Math.abs((maxDim / 2) * Math.atan(this._camera.fov / 2));
|
|
5024
|
-
this._camera.lookAt(center);
|
|
5025
|
-
}
|
|
5026
|
-
_checkNavigationButtons() {
|
|
5027
|
-
const currentIdx = this._getSelectedIndex();
|
|
5028
|
-
this.canNavigateLeft = (currentIdx > 0) || this._fullCircle;
|
|
5029
|
-
this.canNavigateRight = (currentIdx < this._tileElements.length - 1) || this._fullCircle;
|
|
5030
|
-
}
|
|
5031
|
-
_animate() {
|
|
5032
|
-
TWEEN.update();
|
|
5033
|
-
setTimeout(() => {
|
|
5034
|
-
this._renderer.setAnimationLoop(() => this._animate());
|
|
5035
|
-
}, 200);
|
|
5036
|
-
}
|
|
5037
|
-
_getSelectedIndex() {
|
|
5038
|
-
return Math.max(0, Math.min(this.selectedIndex, this._tileElements.length - 1));
|
|
5039
|
-
}
|
|
5040
|
-
_rotate(duration) {
|
|
5041
|
-
TWEEN.removeAll();
|
|
5042
|
-
for (let i = 0; i < this._tiles3D.length; i++) {
|
|
5043
|
-
const tile = this._tiles3D[i];
|
|
5044
|
-
if (Math.abs(this._tileOffset) > this._targetPositions.length) { // full circle
|
|
5045
|
-
this._tileOffset = this._tileOffset > 0 ? 1 : -1;
|
|
5046
|
-
}
|
|
5047
|
-
let positionIdx = i - this._tileOffset;
|
|
5048
|
-
if (positionIdx > this._targetPositions.length - 1) {
|
|
5049
|
-
positionIdx = positionIdx - this._targetPositions.length;
|
|
5050
|
-
}
|
|
5051
|
-
else if (positionIdx < 0) {
|
|
5052
|
-
positionIdx = this._targetPositions.length + positionIdx;
|
|
5053
|
-
}
|
|
5054
|
-
const target = this._targetPositions[positionIdx];
|
|
5055
|
-
new TWEEN.Tween(tile.object.position)
|
|
5056
|
-
.to(target, duration)
|
|
5057
|
-
.easing(TWEEN.Easing.Quartic.Out)
|
|
5058
|
-
.start();
|
|
5059
|
-
new TWEEN.Tween(tile.mesh.position)
|
|
5060
|
-
.to(target, duration)
|
|
5061
|
-
.easing(TWEEN.Easing.Quartic.Out)
|
|
5062
|
-
.start();
|
|
5063
|
-
}
|
|
5064
|
-
new TWEEN.Tween()
|
|
5065
|
-
.to({}, duration * 2)
|
|
5066
|
-
.onUpdate(() => {
|
|
5067
|
-
this._render();
|
|
5068
|
-
})
|
|
5069
|
-
.start();
|
|
5070
|
-
this.selectedIndex = this._tileOffset;
|
|
5071
|
-
this._checkNavigationButtons();
|
|
5072
|
-
this.indexSelected.next(this._getSelectedIndex());
|
|
5073
|
-
}
|
|
5074
|
-
_rotateTo(index) {
|
|
5075
|
-
const current = this._getSelectedIndex();
|
|
5076
|
-
this._tileOffset += index - current;
|
|
5077
|
-
this._rotate(800);
|
|
5078
|
-
}
|
|
5079
|
-
_resizeCanvasToDisplaySize() {
|
|
5080
|
-
setTimeout(() => {
|
|
5081
|
-
if (!this.canvasContainer || !this.canvasContainer.nativeElement) {
|
|
5082
|
-
return;
|
|
5083
|
-
}
|
|
5084
|
-
this._camera.aspect = this.canvasContainer.nativeElement.clientWidth / this.canvasContainer.nativeElement.clientHeight;
|
|
5085
|
-
this._camera.updateProjectionMatrix();
|
|
5086
|
-
this._rendererCss.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
|
|
5087
|
-
this._renderer.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
|
|
5088
|
-
this._render();
|
|
5089
|
-
});
|
|
5090
|
-
}
|
|
5091
|
-
_render() {
|
|
5092
|
-
this._rendererCss.render(this._sceneCss, this._camera);
|
|
5093
|
-
this._renderer.render(this._scene, this._camera);
|
|
5094
|
-
}
|
|
5095
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Carousel3dComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5096
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Carousel3dComponent, isStandalone: false, selector: "co-carousel-3d", inputs: { tileWidth: "tileWidth", tileHeight: "tileHeight", cameraHeight: "cameraHeight", shadow: "shadow", selectedIndex: "selectedIndex" }, outputs: { indexSelected: "indexSelected" }, host: { properties: { "class.co-carousel-3d": "this.showClass" } }, queries: [{ propertyName: "children", predicate: ["carouselItem"], descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "canvasContainer", first: true, predicate: ["canvasContainer"], descendants: true, read: ElementRef }, { propertyName: "carouselWrapper", first: true, predicate: ["carouselWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
5097
|
-
<div class="carousel-3d-canvas-wrapper" #canvasContainer>
|
|
5098
|
-
<div class="carousel-wrapper" #carouselWrapper>
|
|
5099
|
-
<div class="carousel-navigate-button left">
|
|
5100
|
-
@if (canNavigateLeft) {
|
|
5101
|
-
<div class="carousel-navigate-button-wrapper" (click)="handleButtonLeftClick()">
|
|
5102
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
|
|
5103
|
-
<path
|
|
5104
|
-
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
|
|
5105
|
-
</svg>
|
|
5106
|
-
</div>
|
|
5107
|
-
}
|
|
5108
|
-
</div>
|
|
5109
|
-
<div class="carousel-navigate-button right">
|
|
5110
|
-
@if (canNavigateRight) {
|
|
5111
|
-
<div class="carousel-navigate-button-wrapper" (click)="handleButtonRightClick()">
|
|
5112
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
|
|
5113
|
-
<path
|
|
5114
|
-
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
|
|
5115
|
-
</svg>
|
|
5116
|
-
</div>
|
|
5117
|
-
}
|
|
5118
|
-
</div>
|
|
5119
|
-
</div>
|
|
5120
|
-
</div>
|
|
5121
|
-
`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
|
|
5122
|
-
}
|
|
5123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Carousel3dComponent, decorators: [{
|
|
5124
|
-
type: Component,
|
|
5125
|
-
args: [{
|
|
5126
|
-
selector: "co-carousel-3d",
|
|
5127
|
-
template: `
|
|
5128
|
-
<div class="carousel-3d-canvas-wrapper" #canvasContainer>
|
|
5129
|
-
<div class="carousel-wrapper" #carouselWrapper>
|
|
5130
|
-
<div class="carousel-navigate-button left">
|
|
5131
|
-
@if (canNavigateLeft) {
|
|
5132
|
-
<div class="carousel-navigate-button-wrapper" (click)="handleButtonLeftClick()">
|
|
5133
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
|
|
5134
|
-
<path
|
|
5135
|
-
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
|
|
5136
|
-
</svg>
|
|
5137
|
-
</div>
|
|
5138
|
-
}
|
|
5139
|
-
</div>
|
|
5140
|
-
<div class="carousel-navigate-button right">
|
|
5141
|
-
@if (canNavigateRight) {
|
|
5142
|
-
<div class="carousel-navigate-button-wrapper" (click)="handleButtonRightClick()">
|
|
5143
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
|
|
5144
|
-
<path
|
|
5145
|
-
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
|
|
5146
|
-
</svg>
|
|
5147
|
-
</div>
|
|
5148
|
-
}
|
|
5149
|
-
</div>
|
|
5150
|
-
</div>
|
|
5151
|
-
</div>
|
|
5152
|
-
`,
|
|
5153
|
-
encapsulation: ViewEncapsulation.None,
|
|
5154
|
-
standalone: false
|
|
5155
|
-
}]
|
|
5156
|
-
}], propDecorators: { canvasContainer: [{
|
|
5157
|
-
type: ViewChild,
|
|
5158
|
-
args: ["canvasContainer", { read: ElementRef }]
|
|
5159
|
-
}], carouselWrapper: [{
|
|
5160
|
-
type: ViewChild,
|
|
5161
|
-
args: ["carouselWrapper", { read: ElementRef }]
|
|
5162
|
-
}], children: [{
|
|
5163
|
-
type: ContentChildren,
|
|
5164
|
-
args: ["carouselItem", { read: ElementRef, descendants: true }]
|
|
5165
|
-
}], tileWidth: [{
|
|
5166
|
-
type: Input
|
|
5167
|
-
}], tileHeight: [{
|
|
5168
|
-
type: Input
|
|
5169
|
-
}], cameraHeight: [{
|
|
5170
|
-
type: Input
|
|
5171
|
-
}], shadow: [{
|
|
5172
|
-
type: Input
|
|
5173
|
-
}], selectedIndex: [{
|
|
5174
|
-
type: Input
|
|
5175
|
-
}], indexSelected: [{
|
|
5176
|
-
type: Output
|
|
5177
|
-
}], showClass: [{
|
|
5178
|
-
type: HostBinding,
|
|
5179
|
-
args: ["class.co-carousel-3d"]
|
|
5180
|
-
}] } });
|
|
5181
|
-
|
|
5182
|
-
class Carousel3dModule {
|
|
5183
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Carousel3dModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5184
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: Carousel3dModule, declarations: [Carousel3dComponent], imports: [CommonModule], exports: [Carousel3dComponent] });
|
|
5185
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Carousel3dModule, imports: [CommonModule] });
|
|
5186
|
-
}
|
|
5187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Carousel3dModule, decorators: [{
|
|
5188
|
-
type: NgModule,
|
|
5189
|
-
args: [{
|
|
5190
|
-
imports: [
|
|
5191
|
-
CommonModule
|
|
5192
|
-
],
|
|
5193
|
-
declarations: [
|
|
5194
|
-
Carousel3dComponent
|
|
5195
|
-
],
|
|
5196
|
-
exports: [
|
|
5197
|
-
Carousel3dComponent
|
|
5198
|
-
]
|
|
5199
|
-
}]
|
|
5200
|
-
}] });
|
|
5201
|
-
|
|
5202
4761
|
class CarouselComponent {
|
|
5203
4762
|
set containerChild(child) {
|
|
5204
4763
|
if (child) {
|
|
@@ -17360,6 +16919,7 @@ class InputScannerComponent {
|
|
|
17360
16919
|
search = new EventEmitter();
|
|
17361
16920
|
isFocused = new EventEmitter();
|
|
17362
16921
|
barCodeScanned = new EventEmitter();
|
|
16922
|
+
scannerDisabled = true;
|
|
17363
16923
|
showClass() {
|
|
17364
16924
|
return true;
|
|
17365
16925
|
}
|
|
@@ -17373,6 +16933,9 @@ class InputScannerComponent {
|
|
|
17373
16933
|
this._clearTimeout();
|
|
17374
16934
|
}
|
|
17375
16935
|
handleKeyDown(event) {
|
|
16936
|
+
if (this.scannerDisabled) {
|
|
16937
|
+
return;
|
|
16938
|
+
}
|
|
17376
16939
|
const enterKeys = ['Enter', 'NumpadEnter', 'Go'];
|
|
17377
16940
|
if (enterKeys.includes(event.key) && !this._blockEnterKeydown) {
|
|
17378
16941
|
event.preventDefault();
|
|
@@ -17383,6 +16946,9 @@ class InputScannerComponent {
|
|
|
17383
16946
|
}
|
|
17384
16947
|
}
|
|
17385
16948
|
triggerCodeScanned(code) {
|
|
16949
|
+
if (this.scannerDisabled) {
|
|
16950
|
+
return;
|
|
16951
|
+
}
|
|
17386
16952
|
this._clearTimeout();
|
|
17387
16953
|
this._blockEnterKeydown = true;
|
|
17388
16954
|
this.model = code;
|
|
@@ -17394,7 +16960,7 @@ class InputScannerComponent {
|
|
|
17394
16960
|
this._keyDownTimeout = undefined;
|
|
17395
16961
|
}
|
|
17396
16962
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputScannerComponent, deps: [{ token: ScannerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
17397
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InputScannerComponent, isStandalone: false, selector: "co-input-scanner", inputs: { model: "model", placeholder: "placeholder", centerLabel: "centerLabel", useLeftIcon: "useLeftIcon", useRightIcon: "useRightIcon", leftIconData: "leftIconData", rightIconData: "rightIconData", customCssClass: "customCssClass" }, outputs: { modelChange: "modelChange", leftIconClick: "leftIconClick", rightIconClick: "rightIconClick", search: "search", isFocused: "isFocused", barCodeScanned: "barCodeScanned" }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "class.co-input-scanner": "this.showClass" } }, providers: [
|
|
16963
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InputScannerComponent, isStandalone: false, selector: "co-input-scanner", inputs: { model: "model", placeholder: "placeholder", centerLabel: "centerLabel", useLeftIcon: "useLeftIcon", useRightIcon: "useRightIcon", leftIconData: "leftIconData", rightIconData: "rightIconData", customCssClass: "customCssClass", scannerDisabled: "scannerDisabled" }, outputs: { modelChange: "modelChange", leftIconClick: "leftIconClick", rightIconClick: "rightIconClick", search: "search", isFocused: "isFocused", barCodeScanned: "barCodeScanned" }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "class.co-input-scanner": "this.showClass" } }, providers: [
|
|
17398
16964
|
ScannerService,
|
|
17399
16965
|
OverlayService
|
|
17400
16966
|
], ngImport: i0, template: `
|
|
@@ -17469,6 +17035,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
17469
17035
|
type: Output
|
|
17470
17036
|
}], barCodeScanned: [{
|
|
17471
17037
|
type: Output
|
|
17038
|
+
}], scannerDisabled: [{
|
|
17039
|
+
type: Input
|
|
17472
17040
|
}], showClass: [{
|
|
17473
17041
|
type: HostBinding,
|
|
17474
17042
|
args: ['class.co-input-scanner']
|
|
@@ -20995,5 +20563,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
20995
20563
|
* Generated bundle index. Do not edit.
|
|
20996
20564
|
*/
|
|
20997
20565
|
|
|
20998
|
-
export { AlignWithDirective, AlignWithModule, AppendPipe, AppendPipeModule, ArticleTileComponent, ArticleTileModule, BaseInputComponent, BaseInputDatePickerDirective, BaseModuleScreenConfigService, BaseModuleService, ButtonComponent, ButtonModule, CalendarComponent, CalendarModule, CalendarTemplateComponent, CardComponent, CardModule,
|
|
20566
|
+
export { AlignWithDirective, AlignWithModule, AppendPipe, AppendPipeModule, ArticleTileComponent, ArticleTileModule, BaseInputComponent, BaseInputDatePickerDirective, BaseModuleScreenConfigService, BaseModuleService, ButtonComponent, ButtonModule, CalendarComponent, CalendarModule, CalendarTemplateComponent, CardComponent, CardModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayComponent, CheckmarkOverlayModule, ClickOutsideDirective, ClickoutsideModule, CoCurrencyPipe, CoCurrencyPipeModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoOrientation, CollapsibleComponent, CollapsibleModule, Color, ColorPickerComponent, ColorPickerModule, ColorSequence, ColorSequenceName, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, CoreComponentsTranslationModule, CoreComponentsTranslationService, CoreDialogModule, CoreDialogService, CoreLocalizePipe, DoubleCalendarComponent, DoubleCalendarModule, DragDropContainer, DragDropContainerComponent, DragDropManagerService, DragDropModule, DraggableDirective, ElementPosition, FilterItemComponent, FilterItemMode, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormInputUserModelChangeListenerService, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, HourSchedulingComponent, HourSchedulingComponentModule, HourSchedulingExpandableComponent, HourSchedulingExpandableComponentModule, HourSchedulingExpandableTemplateComponent, HourSchedulingExpandableTemplateModule, HourSchedulingTestObjectComponent, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputScannerComponent, InputScannerModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, InputTimeComponent, InputTimeModule, LevelIndicatorComponent, LevelIndicatorModule, ListOfIconsComponent, ListOfIconsModule, ListOfValuesComponent, ListOfValuesModule, ListOfValuesPopupComponent, LoaderComponent, LoaderModule, NgZoneWrapperService, ObserveVisibilityDirective, ObserveVisibilityModule, OrientationOfDirection, OverlayDirective, OverlayModule, OverlayParentDirective, OverlayService, PaginatePipe, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PrependPipe, PrependPipeModule, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, ResponsiveTextComponent, ResponsiveTextModule, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationDirective, ScreenConfigurationModule, ScrollContainerComponent, ScrollContainerModule, ScrollDirection, SimpleGridCellComponent, SimpleGridColumnDirective, SimpleGridColumnTemplateDirective, SimpleGridColumnTemplateType, SimpleGridComponent, SimpleGridModule, TemplateWrapperDirective, TemplateWrapperModule, TextInputPopupComponent, TileComponent, TileModule, TileSelectComponent, TileSelectModule, TooltipDirective, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, emailValidator, equalValidator, getValidatePasswordErrorString, maxStringLengthValidator, passwordValidator, precisionScaleValidator, requiredValidator, showHideDialog };
|
|
20999
20567
|
//# sourceMappingURL=colijnit-corecomponents_v12.mjs.map
|