@colijnit/corecomponents_v12 262.1.6 → 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 +18 -450
- package/fesm2022/colijnit-corecomponents_v12.mjs.map +1 -1
- package/index.d.ts +8 -70
- 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) {
|
|
@@ -13885,6 +13444,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
13885
13444
|
}]
|
|
13886
13445
|
}] });
|
|
13887
13446
|
|
|
13447
|
+
// Represents the enumeration of color sequence names; the different color sequences stored in db.
|
|
13448
|
+
var ColorSequenceName;
|
|
13449
|
+
(function (ColorSequenceName) {
|
|
13450
|
+
ColorSequenceName["Regular"] = "REGULAR";
|
|
13451
|
+
ColorSequenceName["Variant"] = "VARIANT";
|
|
13452
|
+
})(ColorSequenceName || (ColorSequenceName = {}));
|
|
13453
|
+
|
|
13888
13454
|
// The different view modes for content, e.g. list, grid, ..
|
|
13889
13455
|
var ContentViewMode;
|
|
13890
13456
|
(function (ContentViewMode) {
|
|
@@ -17353,6 +16919,7 @@ class InputScannerComponent {
|
|
|
17353
16919
|
search = new EventEmitter();
|
|
17354
16920
|
isFocused = new EventEmitter();
|
|
17355
16921
|
barCodeScanned = new EventEmitter();
|
|
16922
|
+
scannerDisabled = true;
|
|
17356
16923
|
showClass() {
|
|
17357
16924
|
return true;
|
|
17358
16925
|
}
|
|
@@ -17366,6 +16933,9 @@ class InputScannerComponent {
|
|
|
17366
16933
|
this._clearTimeout();
|
|
17367
16934
|
}
|
|
17368
16935
|
handleKeyDown(event) {
|
|
16936
|
+
if (this.scannerDisabled) {
|
|
16937
|
+
return;
|
|
16938
|
+
}
|
|
17369
16939
|
const enterKeys = ['Enter', 'NumpadEnter', 'Go'];
|
|
17370
16940
|
if (enterKeys.includes(event.key) && !this._blockEnterKeydown) {
|
|
17371
16941
|
event.preventDefault();
|
|
@@ -17376,6 +16946,9 @@ class InputScannerComponent {
|
|
|
17376
16946
|
}
|
|
17377
16947
|
}
|
|
17378
16948
|
triggerCodeScanned(code) {
|
|
16949
|
+
if (this.scannerDisabled) {
|
|
16950
|
+
return;
|
|
16951
|
+
}
|
|
17379
16952
|
this._clearTimeout();
|
|
17380
16953
|
this._blockEnterKeydown = true;
|
|
17381
16954
|
this.model = code;
|
|
@@ -17387,7 +16960,7 @@ class InputScannerComponent {
|
|
|
17387
16960
|
this._keyDownTimeout = undefined;
|
|
17388
16961
|
}
|
|
17389
16962
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputScannerComponent, deps: [{ token: ScannerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
17390
|
-
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: [
|
|
17391
16964
|
ScannerService,
|
|
17392
16965
|
OverlayService
|
|
17393
16966
|
], ngImport: i0, template: `
|
|
@@ -17462,6 +17035,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
17462
17035
|
type: Output
|
|
17463
17036
|
}], barCodeScanned: [{
|
|
17464
17037
|
type: Output
|
|
17038
|
+
}], scannerDisabled: [{
|
|
17039
|
+
type: Input
|
|
17465
17040
|
}], showClass: [{
|
|
17466
17041
|
type: HostBinding,
|
|
17467
17042
|
args: ['class.co-input-scanner']
|
|
@@ -19244,13 +18819,6 @@ class ColorSequence {
|
|
|
19244
18819
|
}
|
|
19245
18820
|
}
|
|
19246
18821
|
|
|
19247
|
-
// Represents the enumeration of color sequence names; the different color sequences stored in db.
|
|
19248
|
-
var ColorSequenceName;
|
|
19249
|
-
(function (ColorSequenceName) {
|
|
19250
|
-
ColorSequenceName["Regular"] = "REGULAR";
|
|
19251
|
-
ColorSequenceName["Variant"] = "VARIANT";
|
|
19252
|
-
})(ColorSequenceName || (ColorSequenceName = {}));
|
|
19253
|
-
|
|
19254
18822
|
class ColorSequenceService {
|
|
19255
18823
|
colors = new Map();
|
|
19256
18824
|
_colorSequences = [];
|
|
@@ -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
|