ng-cw-v12/bundles/ng-cw-v12-dock.umd.js

Angular UI component library

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser'), require('@angular/common')) :
    typeof define === 'function' && define.amd ? define('ng-cw-v12/dock', ['exports', '@angular/core', '@angular/platform-browser', '@angular/common'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"].dock = {}), global.ng.core, global.ng.platformBrowser, global.ng.common));
})(this, (function (exports, i0, i1, i2) { 'use strict';

    function _interopNamespace(e) {
        if (e && e.__esModule) return e;
        var n = Object.create(null);
        if (e) {
            Object.keys(e).forEach(function (k) {
                if (k !== 'default') {
                    var d = Object.getOwnPropertyDescriptor(e, k);
                    Object.defineProperty(n, k, d.get ? d : {
                        enumerable: true,
                        get: function () { return e[k]; }
                    });
                }
            });
        }
        n["default"] = e;
        return Object.freeze(n);
    }

    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);

    var DockComponent = /** @class */ (function () {
        function DockComponent(sanitizer) {
            this.sanitizer = sanitizer;
            // 图标尺寸
            this.ncSize = 40;
            // 鼠标到最远放大图标的距离
            this.ncDistance = 140;
            // 展示模式
            this.ncMode = 'distance';
            // 相对于ncSize放大或间隙的倍数
            this.ncMultiple = 1.5;
            // 主题
            this.ncTheme = 'light';
            // 方向
            this.ncDirection = 'horizontal';
            // 分割线
            this.ncDividerIndex = [];
            // 提示文本
            this.ncTooltip = [];
            // 提示文本位置
            this.ncTooltipPosition = 'top';
            // hover效果
            this._hover = false;
            // 图标列表
            this._items = [];
            // 图标点击事件
            this.ncClick = new i0.EventEmitter();
            this.mouseXY = Infinity;
            this.iconScales = [];
            this.isAnimating = false;
            this.animationFrameId = null;
        }
        Object.defineProperty(DockComponent.prototype, "ncHover", {
            get: function () {
                return this._hover;
            },
            set: function (val) {
                this._hover = val !== null && val !== undefined && val !== false && val !== 'false';
            },
            enumerable: false,
            configurable: true
        });
        Object.defineProperty(DockComponent.prototype, "ncItems", {
            get: function () {
                return this._items;
            },
            set: function (value) {
                var _this = this;
                this._items = value;
                setTimeout(function () {
                    _this.resetIconScales();
                });
            },
            enumerable: false,
            configurable: true
        });
        DockComponent.prototype.ngOnInit = function () {
        };
        DockComponent.prototype.ngOnDestroy = function () {
            if (this.animationFrameId !== null) {
                cancelAnimationFrame(this.animationFrameId);
            }
        };
        DockComponent.prototype.resetIconScales = function () {
            var _this = this;
            this.iconScales = this.ncItems.map(function () { return _this.ncSize; });
        };
        DockComponent.prototype.onMouseMove = function (event) {
            var _this = this;
            if (this.ncDirection === 'horizontal') {
                this.mouseXY = event.clientX;
            }
            else {
                this.mouseXY = event.clientY;
            }
            // 使用requestAnimationFrame优化性能
            if (!this.isAnimating) {
                this.isAnimating = true;
                this.animationFrameId = requestAnimationFrame(function () {
                    _this.updateIconScales();
                    _this.isAnimating = false;
                });
            }
        };
        DockComponent.prototype.onMouseLeave = function () {
            this.mouseXY = Infinity;
            this.resetIconScales();
        };
        DockComponent.prototype.updateIconScales = function () {
            var _this = this;
            var icons = this.dockContainer.nativeElement.querySelectorAll('.dock-icon');
            icons.forEach(function (icon, index) {
                var iconRect = icon.getBoundingClientRect();
                var iconCenter = 0;
                if (_this.ncDirection == 'horizontal') {
                    iconCenter = iconRect.left + iconRect.width / 2;
                }
                else {
                    iconCenter = iconRect.top + iconRect.height / 2;
                }
                var distance = Math.abs(_this.mouseXY - iconCenter);
                var scale = _this.ncSize;
                if (distance < _this.ncDistance) {
                    var magnificationDelta = _this.ncMultiple * _this.ncSize - _this.ncSize;
                    // 使用平滑的二次函数曲线使效果更自然
                    var distanceRatio = 1 - Math.pow(distance / _this.ncDistance, 2);
                    scale = _this.ncSize + (magnificationDelta * distanceRatio);
                }
                // 不再使用Angular动画API，改为直接设置样式值让CSS过渡处理
                _this.iconScales[index] = scale;
            });
        };
        DockComponent.prototype.onIconClick = function (index) {
            this.ncClick.emit(index);
        };
        /**
         * 检查项目是否为SVG内容
         */
        DockComponent.prototype.isSvgContent = function (item) {
            return !!item && (typeof item === 'string') && (item.trim().startsWith('<svg') || item.trim().startsWith('<?xml'));
        };
        /**
         * 返回安全处理后的SVG内容
         */
        DockComponent.prototype.getSanitizedSvg = function (svg) {
            return this.sanitizer.bypassSecurityTrustHtml(svg);
        };
        return DockComponent;
    }());
    DockComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: DockComponent, deps: [{ token: i1__namespace.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Component });
    DockComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DockComponent, selector: "nc-dock", inputs: { ncSize: "ncSize", ncDistance: "ncDistance", ncMode: "ncMode", ncMultiple: "ncMultiple", ncTheme: "ncTheme", ncDirection: "ncDirection", ncDividerIndex: "ncDividerIndex", ncTooltip: "ncTooltip", ncTooltipPosition: "ncTooltipPosition", ncHover: "ncHover", ncItems: "ncItems" }, outputs: { ncClick: "ncClick" }, host: { listeners: { "mousemove": "onMouseMove($event)", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "dockContainer", first: true, predicate: ["dockContainer"], descendants: true }], ngImport: i0__namespace, template: "<div #dockContainer style=\"--size: {{ncSize}};\" class=\"dock-container\"\r\n    [ngClass]=\"{'light-mode': ncTheme === 'light', 'dark-mode': ncTheme === 'dark', 'horizontal-mode': ncDirection === 'horizontal', 'vertical-mode': ncDirection === 'vertical'}\">\r\n    <ng-container *ngFor=\"let item of ncItems; let i = index\">\r\n        <div class=\"dock-icon\" [ngStyle]=\"{'width': iconScales[i] + 'px', 'height': iconScales[i] + 'px'}\">\r\n            <div class=\"icon-image-container\"\r\n                [ngClass]=\"{'magnification-mode': ncMode === 'magnification', 'distance-mode': ncMode === 'distance', 'hover-mode': ncHover}\"\r\n                (click)=\"onIconClick(i)\">\r\n                <ng-container *ngIf=\"isSvgContent(item); else imageTemplate\">\r\n                    <div class=\"dock-icon-image\" [innerHTML]=\"getSanitizedSvg(item)\"></div>\r\n                </ng-container>\r\n                <ng-template #imageTemplate>\r\n                    <img [src]=\"item\" class=\"dock-icon-image\">\r\n                </ng-template>\r\n            </div>\r\n            <div *ngIf=\"ncTooltip && ncTooltip[i]\" class=\"dock-tooltip\" [ngClass]=\"'tooltip-' + ncTooltipPosition\">\r\n                {{ ncTooltip[i] }}\r\n            </div>\r\n        </div>\r\n        <div class=\"dock-divider\" *ngIf=\"ncDividerIndex.includes(i)\"></div>\r\n    </ng-container>\r\n</div>", styles: [".dock-container{display:flex;align-items:center;justify-content:center;grid-gap:calc(var(--size) * .2px);gap:calc(var(--size) * .2px);border-radius:calc(var(--size) * .4px);padding:calc(var(--size) * .2px);-webkit-backdrop-filter:blur(calc(var(--size) * .3px));backdrop-filter:blur(calc(var(--size) * .3px));position:relative;will-change:contents}.dock-container.horizontal-mode{flex-direction:row;height:calc(var(--size) * 1.4px + 2px);width:max-content}.dock-container.horizontal-mode .dock-divider{width:1px;height:100%}.dock-container.vertical-mode{flex-direction:column;height:max-content;width:calc(var(--size) * 1.4px + 2px)}.dock-container.vertical-mode .dock-divider{width:100%;height:1px}.dock-container.light-mode{background-color:#ffffff1a;border:1px solid rgba(0,0,0,.1)}.dock-container.light-mode .icon-image-container.hover-mode:hover{background-color:#0000001a}.dock-container.light-mode .dock-divider{background-color:#0000001a}.dock-container.light-mode .dock-tooltip{background-color:#000000bf;color:#fff}.dock-container.dark-mode{background-color:#0000001a;border:1px solid rgba(255,255,255,.2)}.dock-container.dark-mode .icon-image-container.hover-mode:hover{background-color:#fff3}.dock-container.dark-mode .dock-divider{background-color:#fff3}.dock-container.dark-mode .dock-tooltip{background-color:#434343;color:#fff}.dock-container .dock-icon{display:flex;align-items:center;justify-content:center;aspect-ratio:1;transition:width .3s cubic-bezier(.34,1.56,.64,1),height .3s cubic-bezier(.34,1.56,.64,1);overflow:visible;position:relative;transform:translateZ(0)}.dock-container .dock-icon:hover .dock-tooltip{opacity:1}.dock-container .dock-icon .icon-image-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--size) * .2px);border-radius:50%;cursor:pointer;transition:background-color .2s ease;position:relative}.dock-container .dock-icon .icon-image-container.distance-mode .dock-icon-image{width:calc(var(--size) * .6px);height:calc(var(--size) * .6px)}.dock-container .dock-icon .icon-image-container.magnification-mode{width:100%;height:100%}.dock-container .dock-icon .icon-image-container.magnification-mode .dock-icon-image{width:100%;height:100%}.dock-container .dock-icon .icon-image-container .dock-icon-image{object-fit:contain;pointer-events:none;transform:translateZ(0);display:flex;align-items:center;justify-content:center}.dock-container .dock-icon .dock-tooltip{position:absolute;padding:calc(var(--size) * .15px) calc(var(--size) * .3px);border-radius:calc(var(--size) * .15px);font-size:calc(var(--size) * .35px);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:100;box-shadow:0 calc(var(--size) * .05px) calc(var(--size) * .1px) #0003}.dock-container .dock-icon .dock-tooltip.tooltip-top{bottom:100%;left:50%;transform:translate(-50%) translateY(0)}.dock-container .dock-icon .dock-tooltip.tooltip-bottom{top:100%;left:50%;transform:translate(-50%) translateY(0)}.dock-container .dock-icon .dock-tooltip.tooltip-left{right:100%;top:50%;transform:translateY(-50%) translate(0)}.dock-container .dock-icon .dock-tooltip.tooltip-right{left:100%;top:50%;transform:translateY(-50%) translate(0)}\n"], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: DockComponent, decorators: [{
                type: i0.Component,
                args: [{
                        selector: 'nc-dock',
                        templateUrl: './dock.component.html',
                        styleUrls: ['./dock.component.less'],
                    }]
            }], ctorParameters: function () { return [{ type: i1__namespace.DomSanitizer }]; }, propDecorators: { ncSize: [{
                    type: i0.Input
                }], ncDistance: [{
                    type: i0.Input
                }], ncMode: [{
                    type: i0.Input
                }], ncMultiple: [{
                    type: i0.Input
                }], ncTheme: [{
                    type: i0.Input
                }], ncDirection: [{
                    type: i0.Input
                }], ncDividerIndex: [{
                    type: i0.Input
                }], ncTooltip: [{
                    type: i0.Input
                }], ncTooltipPosition: [{
                    type: i0.Input
                }], ncHover: [{
                    type: i0.Input
                }], ncItems: [{
                    type: i0.Input
                }], ncClick: [{
                    type: i0.Output
                }], dockContainer: [{
                    type: i0.ViewChild,
                    args: ['dockContainer']
                }], onMouseMove: [{
                    type: i0.HostListener,
                    args: ['mousemove', ['$event']]
                }], onMouseLeave: [{
                    type: i0.HostListener,
                    args: ['mouseleave']
                }] } });

    var NcDockModule = /** @class */ (function () {
        function NcDockModule() {
        }
        return NcDockModule;
    }());
    NcDockModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcDockModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
    NcDockModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcDockModule, declarations: [DockComponent], imports: [i2.CommonModule], exports: [DockComponent] });
    NcDockModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcDockModule, imports: [[
                i2.CommonModule
            ]] });
    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcDockModule, decorators: [{
                type: i0.NgModule,
                args: [{
                        declarations: [
                            DockComponent
                        ],
                        imports: [
                            i2.CommonModule
                        ],
                        exports: [
                            DockComponent
                        ]
                    }]
            }] });

    /**
     * Generated bundle index. Do not edit.
     */

    exports.DockComponent = DockComponent;
    exports.NcDockModule = NcDockModule;

    Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=ng-cw-v12-dock.umd.js.map