fuzi_fauzia/hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Fuzi_fauzia
2024-04-19 12:53:45 +07:00
commit 71a3a661dc
1943 changed files with 246917 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/content/ngbbootstrap/scrollable/scrollable.component.css Normal file
View File

@@ -0,0 +1,11 @@
:host ::ng-deep .always-visible .ps__rail-x {
opacity: 0.6 !important;
}
:host ::ng-deep .always-visible .ps__rail-y {
opacity: 0.6 !important;
}
vertical-scroll {
overflow: auto !important;
}

464
src/app/content/ngbbootstrap/scrollable/scrollable.component.html Normal file
View File

@@ -0,0 +1,464 @@
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div>
<div class="content-body">
<div class="alert alert-warning mb-2">
<h4 class="alert-heading mb-2">Scrolling children inside perfect-scrollbar</h4>
<p>You can natively scroll children inside perfect-scrollbar with the mouse-wheel. Scrolling automatically
works if the child is a textarea. All other elements need to have the ps-child class.</p>
</div>
<!-- Scroll types section start -->
<section id="scroll-types">
<div class="row" matchHeight="card">
<!-- Vertical Scroll -->
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Vertical Scroll</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="card-text">
<p></p>
</div>
<div class="vertical-scroll scroll-example height-300" fxFlex="auto" [perfectScrollbar]="config">
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
approaches to corporate strategy foster collaborative thinking to further the overall value
proposition. Organically grow the holistic world view of disruptive innovation via workplace
diversity and empowerment.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the
day, going forward, a new normal that has evolved from generation X is on the runway heading
towards a streamlined cloud solution. User generated content in real-time will have multiple
touch points for offshoring.</p>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
Override the digital divide with additional click throughs from DevOps. Nano technology immersion
along the information highway will close the loop on focusing solely on the bottom line.</p>
<p>Podcasting operational change management inside of workflows to establish a framework. Taking
seamless key performance indicators offline to maximise the long tail. Keeping your eye on the
ball while performing a deep dive on the start-up mentality to derive convergence on
cross-platform integration.</p>
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
procrastinate B2C users after installed base benefits. Dramatically visualize customer directed
convergence without revolutionary ROI.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Horizontal Scroll -->
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Horizontal Scroll</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="card-text">
<p></p>
</div>
<div class="horizontal-scroll scroll-example height-300" fxFlex="auto" [perfectScrollbar]="config">
<div class="horz-scroll-content">
<div class="row">
<div class="col-sm-3">
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
approaches to corporate strategy foster collaborative thinking to further the overall value
proposition. Organically grow the holistic world view of disruptive innovation via
workplace diversity and empowerment.</p>
</div>
<div class="col-sm-3">
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
of the day, going forward, a new normal that has evolved from generation X is on the runway
heading towards a streamlined cloud solution. User generated content in real-time will have
multiple touch points for offshoring.</p>
</div>
<div class="col-sm-3">
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
Override the digital divide with additional click throughs from DevOps. Nano technology
immersion along the information highway will close the loop on focusing solely on the
bottom line.</p>
</div>
<div class="col-sm-3">
<p>Podcasting operational change management inside of workflows to establish a framework.
Taking seamless key performance indicators offline to maximise the long tail. Keeping your
eye on the ball while performing a deep dive on the start-up mentality to derive
convergence on cross-platform integration.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Both Side Scroll -->
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Both Side Scroll</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="card-text">
<p></p>
</div>
<div class="both-side-scroll scroll-example height-300" fxFlex="auto" [perfectScrollbar]="config">
<img src="../../../assets/images/carousel/09.jpg" alt="girl" width="800" height="600">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- // Scroll types section end -->
<!-- Scroll wheel section start -->
<section id="scroll-wheel">
<div class="row" matchHeight="card">
<!-- Wheel Speed : 1 -->
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Wheel Speed : 1</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="card-text">
<p>This example demonstrate the default scroll speed for the mouse wheel scroll. Default wheel
speed is <code>1</code>. Chage <code>perfectScrollbar</code> option to achieve desired wheel speed.</p>
</div>
<div class="default-wheel-speed scroll-example height-300" fxFlex="auto" [perfectScrollbar]="speed1">
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
approaches to corporate strategy foster collaborative thinking to further the overall value
proposition. Organically grow the holistic world view of disruptive innovation via workplace
diversity and empowerment.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the
day, going forward, a new normal that has evolved from generation X is on the runway heading
towards a streamlined cloud solution. User generated content in real-time will have multiple
touch points for offshoring.</p>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
Override the digital divide with additional click throughs from DevOps. Nano technology immersion
along the information highway will close the loop on focusing solely on the bottom line.</p>
<p>Podcasting operational change management inside of workflows to establish a framework. Taking
seamless key performance indicators offline to maximise the long tail. Keeping your eye on the
ball while performing a deep dive on the start-up mentality to derive convergence on
cross-platform integration.</p>
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
procrastinate B2C users after installed base benefits. Dramatically visualize customer directed
convergence without revolutionary ROI.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Wheel Speed : 10 -->
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Wheel Speed : 10</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="card-text">
<p>This example demonstrate the higher scroll speed for the mouse wheel scroll. Default wheel speed
is <code>1</code>. In this example <code>perfectScrollbar</code> option is set to <code>10</code>.</p>
</div>
<div class="higher-wheel-speed scroll-example height-300" fxFlex="auto" [perfectScrollbar]="speed10">
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
approaches to corporate strategy foster collaborative thinking to further the overall value
proposition. Organically grow the holistic world view of disruptive innovation via workplace
diversity and empowerment.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the
day, going forward, a new normal that has evolved from generation X is on the runway heading
towards a streamlined cloud solution. User generated content in real-time will have multiple
touch points for offshoring.</p>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
Override the digital divide with additional click throughs from DevOps. Nano technology immersion
along the information highway will close the loop on focusing solely on the bottom line.</p>
<p>Podcasting operational change management inside of workflows to establish a framework. Taking
seamless key performance indicators offline to maximise the long tail. Keeping your eye on the
ball while performing a deep dive on the start-up mentality to derive convergence on
cross-platform integration.</p>
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
procrastinate B2C users after installed base benefits. Dramatically visualize customer directed
convergence without revolutionary ROI.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Wheel Speed : 0.1 -->
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Wheel Speed : 0.1</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="card-text">
<p>This example demonstrate the lower scroll speed for the mouse wheel scroll. Default wheel speed
is <code>1</code>. In this example <code>perfectScrollbar</code> option is set to <code>0.1</code>.</p>
</div>
<div class="lower-wheel-speed scroll-example height-300" fxFlex="auto" [perfectScrollbar]="speed">
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
approaches to corporate strategy foster collaborative thinking to further the overall value
proposition. Organically grow the holistic world view of disruptive innovation via workplace
diversity and empowerment.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the
day, going forward, a new normal that has evolved from generation X is on the runway heading
towards a streamlined cloud solution. User generated content in real-time will have multiple
touch points for offshoring.</p>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
Override the digital divide with additional click throughs from DevOps. Nano technology immersion
along the information highway will close the loop on focusing solely on the bottom line.</p>
<p>Podcasting operational change management inside of workflows to establish a framework. Taking
seamless key performance indicators offline to maximise the long tail. Keeping your eye on the
ball while performing a deep dive on the start-up mentality to derive convergence on
cross-platform integration.</p>
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
procrastinate B2C users after installed base benefits. Dramatically visualize customer directed
convergence without revolutionary ROI.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Scroll wheel section end -->
<!-- Scroll options section start -->
<section id="scroll-options">
<div class="row" matchHeight="card">
<!-- Always Visible Scroll -->
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Always Visible Scroll</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="card-text">
<p>Add class <code>.always-visible</code> to the wrapper element to make the scrollbar always
visible. Srollbars are shown on hover and hidden by default.</p>
</div>
<div class="visible-scroll always-visible scroll-example height-300" fxFlex="auto"
[perfectScrollbar]="visibleScroll">
<div class="horz-scroll-content">
<div class="row">
<div class="col-sm-3">
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
approaches to corporate strategy foster collaborative thinking to further the overall value
proposition. Organically grow the holistic world view of disruptive innovation via
workplace diversity and empowerment.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
of the day, going forward, a new normal that has evolved from generation X is on the runway
heading towards a streamlined cloud solution. User generated content in real-time will have
multiple touch points for offshoring.</p>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
Override the digital divide with additional click throughs from DevOps. Nano technology
immersion along the information highway will close the loop on focusing solely on the
bottom line.</p>
</div>
<div class="col-sm-3">
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
of the day, going forward, a new normal that has evolved from generation X is on the runway
heading towards a streamlined cloud solution. User generated content in real-time will have
multiple touch points for offshoring.</p>
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
approaches to corporate strategy foster collaborative thinking to further the overall value
proposition. Organically grow the holistic world view of disruptive innovation via
workplace diversity and empowerment.</p>
<p>Podcasting operational change management inside of workflows to establish a framework.
Taking seamless key performance indicators offline to maximise the long tail. Keeping your
eye on the ball while performing a deep dive on the start-up mentality to derive
convergence on cross-platform integration.</p>
</div>
<div class="col-sm-3">
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
Override the digital divide with additional click throughs from DevOps. Nano technology
immersion along the information highway will close the loop on focusing solely on the
bottom line.</p>
<p>Podcasting operational change management inside of workflows to establish a framework.
Taking seamless key performance indicators offline to maximise the long tail. Keeping your
eye on the ball while performing a deep dive on the start-up mentality to derive
convergence on cross-platform integration.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
of the day, going forward, a new normal that has evolved from generation X is on the runway
heading towards a streamlined cloud solution. User generated content in real-time will have
multiple touch points for offshoring.</p>
</div>
<div class="col-sm-3">
<p>Podcasting operational change management inside of workflows to establish a framework.
Taking seamless key performance indicators offline to maximise the long tail. Keeping your
eye on the ball while performing a deep dive on the start-up mentality to derive
convergence on cross-platform integration.</p>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
Override the digital divide with additional click throughs from DevOps. Nano technology
immersion along the information highway will close the loop on focusing solely on the
bottom line.</p>
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
approaches to corporate strategy foster collaborative thinking to further the overall value
proposition. Organically grow the holistic world view of disruptive innovation via
workplace diversity and empowerment.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Minimum Scrollbar Length -->
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Minimum Scrollbar Length</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="card-text">
<p>Add option <code>minScrollbarLength</code> to set the minimum scrollbar length. In this example
we have set minimum scrollbar length to 200px.</p>
</div>
<div class="min-scroll-length scroll-example height-300" fxFlex="auto"
[perfectScrollbar]="minScrollbarLength">
<img src="../../../assets/images/carousel/07.jpg" alt="girl" width="800" height="600">
</div>
</div>
</div>
</div>
</div>
<!-- Scrollbar With Margins -->
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Scrollbar With Margins</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="card-text">
<p>Add class <code>.large-margin</code> to the wrapper to have large margins on both sides.</p>
</div>
<div class="scrollbar-margins scroll-example height-300" fxFlex="auto" [perfectScrollbar]="margins">
<img src="../../../assets/images/carousel/10.jpg" alt="girl" width="800" height="600">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- // Scroll options section end -->
<!-- Scroll events section start -->
<section id="scroll-events">
<div class="row" matchHeight="card">
<!-- Default Handlers -->
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default Handlers</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="card-text">
<p>This example supports all the handlers. Here is the list of all supported handlers :
<code>'click-rail'</code>,
<code>'drag-scrollbar'</code>, <code>'keyboard'</code>, <code>'wheel'</code>,
<code>'touch'</code>. Use <code>handlers</code> option.</p>
</div>
<div class="default-handlers scroll-example height-300" fxFlex="auto" [perfectScrollbar]="handlers">
<img src="../../../assets/images/carousel/06.jpg" alt="girl" width="800" height="600">
</div>
</div>
</div>
</div>
</div>
<!-- No Keyboard -->
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">No Keyboard</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="card-text">
<p>This example supports all the handlers except keyboard. Here is the list of all supported
handlers : <code>'click-rail'</code>, <code>'drag-scrollbar'</code>, <code>'wheel'</code>,
<code>'touch'</code>. Use <code>noKeyboard</code> option.</p>
</div>
<div class="no-keyboard scroll-example height-300" fxFlex="auto" [perfectScrollbar]="noKeyboard">
<img src="../../../assets/images/carousel/03.jpg" alt="girl" width="800" height="600">
</div>
</div>
</div>
</div>
</div>
<!-- Click and Drag -->
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Click and Drag</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="card-text">
<p>This example supports only two handlers. Here is the list of supported handlers :
<code>'click-rail'</code>,
<code>'drag-scrollbar'</code>. Use <code>clickDrag</code> option. </p>
</div>
<div class="click-drag-handler scroll-example height-300" fxFlex="auto"
[perfectScrollbar]="clickDrag">
<img src="../../../assets/images/carousel/05.jpg" alt="girl" width="800" height="600">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- // Scroll events section end -->
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->

25
src/app/content/ngbbootstrap/scrollable/scrollable.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { ScrollableComponent } from './scrollable.component';
describe('ScrollableComponent', () => {
let component: ScrollableComponent;
let fixture: ComponentFixture<ScrollableComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ ScrollableComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ScrollableComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

68
src/app/content/ngbbootstrap/scrollable/scrollable.component.ts Normal file
View File

@@ -0,0 +1,68 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import {
PerfectScrollbarConfigInterface,
PerfectScrollbarComponent, PerfectScrollbarDirective
} from 'ngx-perfect-scrollbar';
@Component({
selector: 'app-scrollable',
templateUrl: './scrollable.component.html',
styleUrls: ['./scrollable.component.css']
})
export class ScrollableComponent implements OnInit {
public breadcrumb: any;
public config: PerfectScrollbarConfigInterface = { wheelPropagation: false};
public speed1: PerfectScrollbarConfigInterface = { wheelSpeed: 1 , wheelPropagation: false };
public speed10: PerfectScrollbarConfigInterface = { wheelSpeed: 10 , wheelPropagation: false };
public speed: PerfectScrollbarConfigInterface = { wheelSpeed: 0.1 , wheelPropagation: false };
public visibleScroll: PerfectScrollbarConfigInterface = {wheelPropagation: false};
public minScrollbarLength: PerfectScrollbarConfigInterface = { minScrollbarLength: 200 , wheelPropagation: false };
public margins: PerfectScrollbarConfigInterface = { scrollXMarginOffset: 40, scrollYMarginOffset: 90 , wheelPropagation: false };
public handlers: PerfectScrollbarConfigInterface = { wheelPropagation: false,
handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'] };
public noKeyboard: PerfectScrollbarConfigInterface = {wheelPropagation: false,
handlers: ['click-rail', 'drag-thumb', 'wheel', 'touch'] };
public clickDrag: PerfectScrollbarConfigInterface = {wheelPropagation: false,
handlers: ['click-rail', 'drag-thumb'] };
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
constructor() { }
ngOnInit() {
this.breadcrumb = {
'mainlabel': 'Scrollable',
'links': [
{
'name': 'Home',
'isLink': true,
'link': '/dashboard/sales'
},
{
'name': 'Component',
'isLink': true,
'link': '#'
},
{
'name': 'Scrollable',
'isLink': false
}
]
};
}
}