mirror of
https://github.com/grafana/grafana.git
synced 2025-02-15 01:53:33 -06:00
3a7623753b
* build(webpack): replace babel-loader with esbuild-loader * build(webpack): add esbuild minifier to production builds * Wip * Removed ngInject and replaced with manual inject params * chore: bump esbuild to 0.15.13 * Fixed angular issues * build(frontend): update esbuild to 0.16.16 * chore(webpack): support browserslist for esbuild * build(esbuild): unify versions of esbuild to 0.16.17 and esbuild-loader to 2.21.0 Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
import coreModule from 'app/angular/core_module';
|
|
|
|
const template = `
|
|
<label for="check-{{ctrl.id}}" class="gf-form-switch-container">
|
|
<div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
|
|
{{ctrl.label}}
|
|
<info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
|
|
{{ctrl.tooltip}}
|
|
</info-popover>
|
|
</div>
|
|
<div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
|
|
<input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
|
|
<span class="gf-form-switch__slider"></span>
|
|
</div>
|
|
</label>
|
|
`;
|
|
|
|
const checkboxTemplate = `
|
|
<label for="check-{{ctrl.id}}" class="gf-form-switch-container">
|
|
<div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
|
|
{{ctrl.label}}
|
|
<info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
|
|
{{ctrl.tooltip}}
|
|
</info-popover>
|
|
</div>
|
|
<div class="gf-form-checkbox {{ctrl.switchClass}}" ng-if="ctrl.show">
|
|
<input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
|
|
<span class="gf-form-switch__checkbox"></span>
|
|
</div>
|
|
</label>
|
|
`;
|
|
|
|
export class SwitchCtrl {
|
|
onChange: any;
|
|
checked: any;
|
|
show: any;
|
|
id: any;
|
|
label?: string;
|
|
|
|
static $inject = ['$scope', '$timeout'];
|
|
|
|
constructor($scope: any, private $timeout: any) {
|
|
this.show = true;
|
|
this.id = $scope.$id;
|
|
}
|
|
|
|
internalOnChange() {
|
|
return this.$timeout(() => {
|
|
return this.onChange();
|
|
});
|
|
}
|
|
}
|
|
|
|
export function switchDirective() {
|
|
return {
|
|
restrict: 'E',
|
|
controller: SwitchCtrl,
|
|
controllerAs: 'ctrl',
|
|
bindToController: true,
|
|
scope: {
|
|
checked: '=',
|
|
label: '@',
|
|
labelClass: '@',
|
|
tooltip: '@',
|
|
switchClass: '@',
|
|
onChange: '&',
|
|
},
|
|
template: template,
|
|
};
|
|
}
|
|
|
|
export function checkboxDirective() {
|
|
return {
|
|
restrict: 'E',
|
|
controller: SwitchCtrl,
|
|
controllerAs: 'ctrl',
|
|
bindToController: true,
|
|
scope: {
|
|
checked: '=',
|
|
label: '@',
|
|
labelClass: '@',
|
|
tooltip: '@',
|
|
switchClass: '@',
|
|
onChange: '&',
|
|
},
|
|
template: checkboxTemplate,
|
|
};
|
|
}
|
|
|
|
coreModule.directive('gfFormSwitch', switchDirective);
|
|
coreModule.directive('gfFormCheckbox', checkboxDirective);
|