diff --git a/projects/ars/src/lib/ars.module.ts b/projects/ars/src/lib/ars.module.ts
index 665c5758b56d66a30ff7dcca28ef1953268ce1a0..638e7649b72e09e01818bd19b579c14baf8ea298 100644
--- a/projects/ars/src/lib/ars.module.ts
+++ b/projects/ars/src/lib/ars.module.ts
@@ -1,17 +1,23 @@
import { NgModule } from '@angular/core';
import { ArsComponent } from './ars.component';
import { ArsSlider } from './components/io/slider/ArsSlider';
+import { ArsSliderCombComponent } from './components/io/slider/ars-slider-comb/ars-slider-comb.component';
+import { MatButtonModule, MatIconModule } from '@angular/material';
@NgModule({
declarations: [
ArsComponent,
- ArsSlider
+ ArsSlider,
+ ArsSliderCombComponent
],
imports: [
+ MatIconModule,
+ MatButtonModule
],
exports: [
ArsComponent,
- ArsSlider
+ ArsSlider,
+ ArsSliderCombComponent
]
})
export class ArsModule { }
diff --git a/projects/ars/src/lib/components/io/slider/ArsSlider.ts b/projects/ars/src/lib/components/io/slider/ArsSlider.ts
index 94cc94b65e5c49707a75810e57c0d1a2bd2bcbeb..71c04a5d8875a11532cf900898b1551b90bbd0a9 100644
--- a/projects/ars/src/lib/components/io/slider/ArsSlider.ts
+++ b/projects/ars/src/lib/components/io/slider/ArsSlider.ts
@@ -1,4 +1,5 @@
-import { Directive } from '@angular/core';
+import { AfterViewInit, Directive, Input, OnInit, Renderer2 } from '@angular/core';
+import { MatSlider } from '@angular/material';
@Directive({
@@ -6,6 +7,55 @@ import { Directive } from '@angular/core';
selector: '[ars-slider]'
})
// tslint:disable-next-line:directive-class-suffix
-export class ArsSlider {
+export class ArsSlider implements OnInit,AfterViewInit {
+
+ public static classes:Object={
+ 'mat-slider-wrapper':'',
+ 'mat-slider-track-wrapper':'rgba(127,127,127,0.5)',
+ 'mat-slider-track-background':'',
+ 'mat-slider-track-fill':'var(--on-surface)',
+ 'mat-slider-ticks-container':'',
+ 'mat-slider-ticks':'',
+ 'mat-slider-focus-ring':'var(--on-surface)',
+ 'mat-slider-thumb':'var(--on-surface)',
+ 'mat-slider-thumb-container':'var(--on-surface)',
+ 'mat-slider-thumb-label':'',
+ 'mat-slider-thumb-label-text':''
+ };
+
+ @Input() width:number;
+
+ private elem:HTMLInputElement;
+
+ constructor(private slider:MatSlider, private render:Renderer2) {
+ this.elem = slider._elementRef.nativeElement;
+ }
+
+ ngOnInit(){
+ }
+
+ ngAfterViewInit(){
+ Array.from(this.elem.getElementsByTagName('*')).forEach(e=>{
+ console.log(e.className);
+ if(ArsSlider.classes.hasOwnProperty(e.className)){
+ (<HTMLElement>e).style.background=ArsSlider.classes[e.className];
+ }
+ });
+ this.render.setStyle(this.elem,'height','48px');
+ this.render.setStyle(this.elem,'minHeight','48px');
+ this.render.setStyle(this.elem,'maxHeight','48px');
+ this.updateWidth();
+ }
+
+ public setWidth(width:number){
+ this.width=width;
+ this.updateWidth();
+ }
+
+ private updateWidth(){
+ this.render.setStyle(this.elem,'width',this.width+'px');
+ this.render.setStyle(this.elem,'minWidth',this.width+'px');
+ this.render.setStyle(this.elem,'maxWidth',this.width+'px');
+ }
}
diff --git a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.html b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..9d6b4314136b45f1aca08497f096214b9c7c18ab
--- /dev/null
+++ b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.html
@@ -0,0 +1,7 @@
+
+<ng-container>
+ <mat-icon (click)="prev();">{{leftIcon}}</mat-icon>
+ <ng-content>
+ </ng-content>
+ <mat-icon (click)="next();">{{rightIcon}}</mat-icon>
+</ng-container>
diff --git a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.scss b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fb8fcc8c2619eae8ec710af7684974e85b7ab8d0
--- /dev/null
+++ b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.scss
@@ -0,0 +1,23 @@
+
+:host{
+ width:100%;
+ height:48px;
+ display:flex;
+ justify-content:space-between;
+ flex-direction:row;
+}
+
+mat-icon{
+ padding:12px 5px;
+ margin:0;
+ display:flex;
+ float:left;
+ flex-shrink:0;
+ -webkit-touch-callout:none;
+ -webkit-user-select:none;
+ -moz-user-select:none;
+ -ms-user-select:none;
+ user-select:none;
+}
+
+
diff --git a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.spec.ts b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fdbb2555b274941c916cdc987e0200472fd68be1
--- /dev/null
+++ b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArsSliderCombComponent } from './ars-slider-comb.component';
+
+describe('ArsSliderCombComponent', () => {
+ let component: ArsSliderCombComponent;
+ let fixture: ComponentFixture<ArsSliderCombComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ArsSliderCombComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ArsSliderCombComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.ts b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3a11934b7fec0f4a01873b75142ebfb0da8f4a38
--- /dev/null
+++ b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.ts
@@ -0,0 +1,35 @@
+import { AfterViewInit, Component, ContentChild, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { ArsSlider } from '../ArsSlider';
+import { MatIcon } from '@angular/material';
+
+@Component({
+ selector: 'ars-slider-comb',
+ templateUrl: './ars-slider-comb.component.html',
+ styleUrls: ['./ars-slider-comb.component.scss']
+})
+export class ArsSliderCombComponent implements OnInit,AfterViewInit {
+
+ @Input() width:number;
+ @Input() leftIcon:string='keyboard_arrow_left';
+ @Input() rightIcon:string='keyboard_arrow_right';
+ @ContentChild(ArsSlider) slider:ArsSlider;
+
+ constructor(private ref:ElementRef, private render:Renderer2) { }
+
+ ngOnInit() {
+ }
+
+ ngAfterViewInit(){
+ this.slider.setWidth(this.width-68);
+ if(this.width){
+ this.render.setStyle(this.ref.nativeElement,'width',this.width+'px');
+ }
+ }
+
+ private prev(){
+ }
+
+ private next(){
+ }
+
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index c2246001e77bc6133c723d7de4001e351172f2fa..147a782e008147241a1a947fe8a2b131f8561ba9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -30,3 +30,8 @@
</button>
</div>
</div>
+<div class="testBox">
+ <ars-slider-comb [width]="150" [leftIcon]="'zoom_out'" [rightIcon]="'zoom_in'">
+ <mat-slider ars-slider [min]="0" [max]="100" [step]="1"></mat-slider>
+ </ars-slider-comb>
+</div>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f8d6cfd9444ac63f3a6e28e473051fbbf019ff69..4658e8da8fc841ed9e81de7daf610f65636a0658 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -58,6 +58,7 @@ import { HelpEnComponent } from '../assets/i18n/help/help-en';
import { OverlayComponent } from './components/home/_dialogs/overlay/overlay.component';
import { DemoDeComponent } from '../assets/i18n/demo/demo-de';
import { DemoEnComponent } from '../assets/i18n/demo/demo-en';
+import { ArsModule } from '../../projects/ars/src/lib/ars.module';
export function dialogClose(dialogResult: any) {
}
@@ -119,7 +120,7 @@ export function initializeApp(appConfig: AppConfig) {
sanitize: true
}
}),
- ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+ ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
@@ -127,7 +128,8 @@ export function initializeApp(appConfig: AppConfig) {
deps: [HttpClient]
},
isolate: true
- })
+ }),
+ ArsModule
],
providers: [
/*AppConfig,
diff --git a/src/styles.scss b/src/styles.scss
index 938b1a88ceadb721502a07d67afc18696a1a1a61..f13810a7921f25623cb1b3f16533bcb42020b190 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -99,3 +99,13 @@ address {
height: 0px;
overflow: hidden;
}
+
+.testBox{
+ width:50%;
+ height:50%;
+ position: fixed;
+ left:0px;
+ top:25%;
+ z-index: 1000;
+ background-color: var(--surface);
+}