@colijnit/corecomponents_v12 261.20.11 → 261.20.13
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/fesm2022/colijnit-corecomponents_v12.mjs +2 -442
- package/fesm2022/colijnit-corecomponents_v12.mjs.map +1 -1
- package/index.d.ts +1 -64
- package/package.json +1 -3
- 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
|
@@ -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) {
|
|
@@ -16423,6 +15982,7 @@ class FilterItemComponent {
|
|
|
16423
15982
|
this.mode === this.modes.Slider;
|
|
16424
15983
|
const canApplyDefaults = (modeWithoutCollection || (!modeWithoutCollection && this.collection && this.collection.length > 0)) &&
|
|
16425
15984
|
this.defaultValue &&
|
|
15985
|
+
!this.hidden &&
|
|
16426
15986
|
!(this._model?.length || this._model > 0);
|
|
16427
15987
|
if (!canApplyDefaults) {
|
|
16428
15988
|
return;
|
|
@@ -20915,5 +20475,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
20915
20475
|
* Generated bundle index. Do not edit.
|
|
20916
20476
|
*/
|
|
20917
20477
|
|
|
20918
|
-
export { AlignWithDirective, AlignWithModule, AppendPipe, AppendPipeModule, ArticleTileComponent, ArticleTileModule, BaseInputComponent, BaseInputDatePickerDirective, BaseModuleScreenConfigService, BaseModuleService, ButtonComponent, ButtonModule, CalendarComponent, CalendarModule, CalendarTemplateComponent, CardComponent, CardModule,
|
|
20478
|
+
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, ColorPickerComponent, ColorPickerModule, 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 };
|
|
20919
20479
|
//# sourceMappingURL=colijnit-corecomponents_v12.mjs.map
|